From be4362ff211f69613949492798c88c5cdfd84d74 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 10:41:13 +0000
Subject: [PATCH 01/14] Removed tab hiding

---
 src/components/panelLeft.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index e65f7a38..97901d61 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -61,7 +61,6 @@
     <!-- Corresponding vertical tab content -->
     <div
       id="container-left"
-      :hidden="!showControlBar"
       class="uk-padding-remove uk-height-1-1 uk-width-expand"
     >
       <div
@@ -135,12 +134,18 @@ import axios from "axios";
 import tabIcon from "./genericComponents/tabIcon";
 import tabContent from "./genericComponents/tabContent";
 
-// Import pane components
+// Import control components
 import paneStatus from "./controlComponents/paneStatus";
 import paneNavigate from "./controlComponents/paneNavigate";
 import paneCapture from "./controlComponents/paneCapture";
 import paneSettings from "./controlComponents/paneSettings";
 
+// Import view components
+import connectDisplay from "./viewComponents/connectDisplay.vue";
+import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
+import streamDisplay from "./viewComponents/streamDisplay.vue";
+import galleryDisplay from "./viewComponents/galleryDisplay.vue";
+
 // Import plugin components
 import JsonForm from "./pluginComponents/JsonForm";
 
@@ -162,7 +167,6 @@ export default {
     return {
       plugins: [],
       currentTab: "status",
-      showControlBar: true,
       unwatchStoreFunction: null
     };
   },
@@ -225,11 +229,7 @@ export default {
         });
     },
     setTab: function(event, tab) {
-      if (this.currentTab == tab) {
-        this.showControlBar = !this.showControlBar;
-        this.currentTab = "none";
-      } else {
-        this.showControlBar = true;
+      if (!(this.currentTab == tab)) {
         this.currentTab = tab;
       }
     }
@@ -239,7 +239,7 @@ export default {
 
 <style scoped lang="less">
 #component-left {
-  width: 300px;
+  width: 100%;
 }
 
 #container-left {

From 3679a0f9cdcf085aee16b05152b6e7180b9bb6ef Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 13:46:14 +0000
Subject: [PATCH 02/14] Replaced navigation with a single universal tab bar

---
 src/App.vue                                   |  37 ++--
 .../controlComponents/paneCapture.vue         |   2 +-
 .../controlComponents/paneNavigate.vue        |   2 +-
 .../controlComponents/paneSettings.vue        |  43 -----
 .../controlComponents/paneStatus.vue          |   2 +-
 .../genericComponents/tabContent.vue          |   9 +-
 src/components/panelLeft.vue                  | 159 ++++++++++--------
 .../tabContentComponents/captureContent.vue   |  25 +++
 .../tabContentComponents/connectContent.vue   |  20 +++
 .../tabContentComponents/galleryContent.vue   |  19 +++
 .../tabContentComponents/navigateContent.vue  |  25 +++
 .../tabContentComponents/settingsContent.vue  |  25 +++
 .../galleryComponents/zipDownloader.vue       |  15 +-
 .../settingsComponents/appSettings.vue        |   0
 .../settingsComponents/cameraSettings.vue     |   0
 .../settingsComponents/microscopeSettings.vue |   0
 .../settingsComponents/streamSettings.vue     |   0
 .../viewComponents/settingsDisplay.vue        |  40 +++++
 18 files changed, 286 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/controlComponents/paneSettings.vue
 create mode 100644 src/components/tabContentComponents/captureContent.vue
 create mode 100644 src/components/tabContentComponents/connectContent.vue
 create mode 100644 src/components/tabContentComponents/galleryContent.vue
 create mode 100644 src/components/tabContentComponents/navigateContent.vue
 create mode 100644 src/components/tabContentComponents/settingsContent.vue
 rename src/components/{controlComponents => viewComponents}/settingsComponents/appSettings.vue (100%)
 rename src/components/{controlComponents => viewComponents}/settingsComponents/cameraSettings.vue (100%)
 rename src/components/{controlComponents => viewComponents}/settingsComponents/microscopeSettings.vue (100%)
 rename src/components/{controlComponents => viewComponents}/settingsComponents/streamSettings.vue (100%)
 create mode 100644 src/components/viewComponents/settingsDisplay.vue

diff --git a/src/App.vue b/src/App.vue
index c2a31018..4ec5e9c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,22 @@
 <template>
-  <div id="app" :class="handleTheme">
-    <!-- Grid managing whole app -->
-    <div
-      uk-grid
-      class="uk-height-1-1 uk-margin-remove uk-padding-remove"
-      margin="0"
-    >
-      <panelLeft />
-      <panelRight />
-    </div>
+  <div
+    id="app"
+    class="uk-height-1-1 uk-margin-remove uk-padding-remove"
+    :class="handleTheme"
+  >
+    <panelLeft />
   </div>
 </template>
 
 <script>
 // Import components
 import panelLeft from "./components/panelLeft.vue";
-import panelRight from "./components/panelRight.vue";
 
 // Export main app
 export default {
   name: "App",
 
   components: {
-    panelRight,
     panelLeft
   },
 
@@ -131,4 +125,23 @@ html {
   pointer-events: none;
   opacity: 0.4;
 }
+
+.control-component {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 300px;
+  height: 100%;
+  padding: 0;
+  background-color: rgba(180, 180, 180, 0.055);
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+}
+
+.view-component {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding: 0;
+}
 </style>
diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index 0d70138f..ac549961 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="paneCapture">
+  <div id="paneCapture" class="uk-padding-small">
     <div>
       <label class="uk-form-label" for="form-stacked-text">Filename</label>
       <input
diff --git a/src/components/controlComponents/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
index 6e304952..64b3c6af 100644
--- a/src/components/controlComponents/paneNavigate.vue
+++ b/src/components/controlComponents/paneNavigate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="paneNavigate">
+  <div id="paneNavigate" class="uk-padding-small">
     <div v-if="setPosition">
       <ul uk-accordion="multiple: true; animation: false">
         <li>
diff --git a/src/components/controlComponents/paneSettings.vue b/src/components/controlComponents/paneSettings.vue
deleted file mode 100644
index ca8fd408..00000000
--- a/src/components/controlComponents/paneSettings.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div id="paneSettings">
-    <appSettings />
-
-    <ul uk-accordion="multiple: true; animation: false">
-      <li>
-        <a class="uk-accordion-title" href="#">Stream settings</a>
-        <div class="uk-accordion-content"><streamSettings /></div>
-      </li>
-
-      <li v-if="$store.getters.ready">
-        <a class="uk-accordion-title" href="#">Camera settings</a>
-        <div class="uk-accordion-content"><cameraSettings /></div>
-      </li>
-
-      <li v-if="$store.getters.ready">
-        <a class="uk-accordion-title" href="#">Microscope settings</a>
-        <div class="uk-accordion-content"><microscopeSettings /></div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import streamSettings from "./settingsComponents/streamSettings.vue";
-import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
-import cameraSettings from "./settingsComponents/cameraSettings.vue";
-import appSettings from "./settingsComponents/appSettings.vue";
-
-// Export main app
-export default {
-  name: "PaneSettings",
-
-  components: {
-    streamSettings,
-    cameraSettings,
-    microscopeSettings,
-    appSettings
-  }
-};
-</script>
-
-<style lang="less"></style>
diff --git a/src/components/controlComponents/paneStatus.vue b/src/components/controlComponents/paneStatus.vue
index ea597bd8..fbf4a035 100644
--- a/src/components/controlComponents/paneStatus.vue
+++ b/src/components/controlComponents/paneStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="host-input">
+  <div class="host-input uk-padding-small">
     <div v-if="configuration && $store.getters.ready">
       <div>
         <div class="uk-margin-small-bottom">
diff --git a/src/components/genericComponents/tabContent.vue b/src/components/genericComponents/tabContent.vue
index 144aad70..1b09d514 100644
--- a/src/components/genericComponents/tabContent.vue
+++ b/src/components/genericComponents/tabContent.vue
@@ -2,9 +2,8 @@
   <div
     v-if="!(requireConnection && !$store.getters.ready)"
     :hidden="currentTab != id"
-    class="uk-width-expand"
+    class="uk-width-expand uk-height-1-1"
   >
-    <div class="section-heading">{{ id }}</div>
     <div class="section-content"><slot></slot></div>
   </div>
 </template>
@@ -39,8 +38,8 @@ export default {
   cursor: default;
 }
 
-.section-content,
-.section-heading {
-  padding: 9px 10px;
+.section-content {
+  padding: 0;
+  height: 100%;
 }
 </style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 97901d61..7c81f70e 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -10,13 +10,24 @@
       class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
     >
       <tabIcon
-        id="status"
+        id="connect"
         :require-connection="false"
         :current-tab="currentTab"
         @set-tab="setTab"
       >
         <i class="material-icons">bug_report</i>
       </tabIcon>
+      <tabIcon
+        id="gallery"
+        :require-connection="true"
+        :current-tab="currentTab"
+        @set-tab="setTab"
+      >
+        <i class="material-icons">photo_library</i>
+      </tabIcon>
+
+      <hr />
+
       <tabIcon
         id="navigate"
         :require-connection="true"
@@ -63,66 +74,66 @@
       id="container-left"
       class="uk-padding-remove uk-height-1-1 uk-width-expand"
     >
-      <div
-        id="component-left"
-        class="uk-padding-remove uk-flex uk-flex-1 panel-content"
+      <tabContent
+        id="connect"
+        :require-connection="false"
+        :current-tab="currentTab"
       >
-        <tabContent
-          id="status"
-          :require-connection="false"
-          :current-tab="currentTab"
-        >
-          <paneStatus />
-        </tabContent>
-        <tabContent
-          id="navigate"
-          :require-connection="true"
-          :current-tab="currentTab"
-        >
-          <paneNavigate />
-        </tabContent>
-        <tabContent
-          id="capture"
-          :require-connection="true"
-          :current-tab="currentTab"
-        >
-          <paneCapture />
-        </tabContent>
-        <tabContent
-          id="settings"
-          :require-connection="false"
-          :current-tab="currentTab"
-        >
-          <paneSettings />
-        </tabContent>
+        <connectContent />
+      </tabContent>
+      <tabContent
+        id="gallery"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <galleryContent />
+      </tabContent>
+      <tabContent
+        id="navigate"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <navigateContent />
+      </tabContent>
+      <tabContent
+        id="capture"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <captureContent />
+      </tabContent>
+      <tabContent
+        id="settings"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <settingsContent />
+      </tabContent>
 
-        <tabContent
-          v-for="plugin in pluginsGuiList"
-          :id="plugin.id"
-          :key="plugin.id"
-          :require-connection="plugin.requiresConnection"
-          :current-tab="currentTab"
+      <tabContent
+        v-for="plugin in pluginsGuiList"
+        :id="plugin.id"
+        :key="plugin.id"
+        :require-connection="plugin.requiresConnection"
+        :current-tab="currentTab"
+      >
+        <div
+          v-for="form in plugin.forms"
+          :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
+          class="uk-flex uk-flex-column"
         >
-          <div
-            v-for="form in plugin.forms"
-            :key="
-              `${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()
-            "
-            class="uk-flex uk-flex-column"
-          >
-            <JsonForm
-              :name="form.name"
-              :route="form.route"
-              :is-task="form.isTask"
-              :submit-label="form.submitLabel"
-              :schema="form.schema"
-              :emit-on-response="form.emitOnResponse"
-              @reloadForms="updatePlugins()"
-            />
-            <hr />
-          </div>
-        </tabContent>
-      </div>
+          <JsonForm
+            :name="form.name"
+            :route="form.route"
+            :is-task="form.isTask"
+            :submit-label="form.submitLabel"
+            :schema="form.schema"
+            :emit-on-response="form.emitOnResponse"
+            @reloadForms="updatePlugins()"
+          />
+          <hr />
+        </div>
+      </tabContent>
     </div>
   </div>
 </template>
@@ -135,16 +146,15 @@ import tabIcon from "./genericComponents/tabIcon";
 import tabContent from "./genericComponents/tabContent";
 
 // Import control components
-import paneStatus from "./controlComponents/paneStatus";
 import paneNavigate from "./controlComponents/paneNavigate";
 import paneCapture from "./controlComponents/paneCapture";
-import paneSettings from "./controlComponents/paneSettings";
 
-// Import view components
-import connectDisplay from "./viewComponents/connectDisplay.vue";
-import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
-import streamDisplay from "./viewComponents/streamDisplay.vue";
-import galleryDisplay from "./viewComponents/galleryDisplay.vue";
+// Import new content components
+import connectContent from "./tabContentComponents/connectContent.vue";
+import navigateContent from "./tabContentComponents/navigateContent.vue";
+import captureContent from "./tabContentComponents/captureContent.vue";
+import settingsContent from "./tabContentComponents/settingsContent.vue";
+import galleryContent from "./tabContentComponents/galleryContent.vue";
 
 // Import plugin components
 import JsonForm from "./pluginComponents/JsonForm";
@@ -156,17 +166,20 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    paneStatus,
     paneNavigate,
     paneCapture,
-    paneSettings,
-    JsonForm
+    JsonForm,
+    connectContent,
+    navigateContent,
+    captureContent,
+    settingsContent,
+    galleryContent
   },
 
   data: function() {
     return {
       plugins: [],
-      currentTab: "status",
+      currentTab: "connect",
       unwatchStoreFunction: null
     };
   },
@@ -201,7 +214,7 @@ export default {
           console.log("Left panel now ready");
         } else {
           console.log("Right panel now disabled");
-          this.currentTab = "status";
+          this.currentTab = "connect";
         }
       }
     );
@@ -240,14 +253,16 @@ export default {
 <style scoped lang="less">
 #component-left {
   width: 100%;
+  height: 100%;
 }
 
 #container-left {
-  overflow: hidden auto;
+  overflow: hidden;
   background-color: rgba(180, 180, 180, 0.025);
+  width: 100%;
+  height: 100%;
 }
 
-#container-left,
 #switcher-left {
   border-width: 0 1px 0 0;
   border-style: solid;
diff --git a/src/components/tabContentComponents/captureContent.vue b/src/components/tabContentComponents/captureContent.vue
new file mode 100644
index 00000000..a2959bd2
--- /dev/null
+++ b/src/components/tabContentComponents/captureContent.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">
+      <paneCapture />
+    </div>
+    <div class="view-component uk-width-expand">
+      <streamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneCapture from "../controlComponents/paneCapture";
+import streamDisplay from "../viewComponents/streamDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneCapture,
+    streamDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/connectContent.vue b/src/components/tabContentComponents/connectContent.vue
new file mode 100644
index 00000000..db98b3fc
--- /dev/null
+++ b/src/components/tabContentComponents/connectContent.vue
@@ -0,0 +1,20 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="view-component uk-width-expand">
+      <connectDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import connectDisplay from "../viewComponents/connectDisplay.vue";
+
+export default {
+  name: "ConnectContent",
+
+  components: {
+    connectDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/galleryContent.vue b/src/components/tabContentComponents/galleryContent.vue
new file mode 100644
index 00000000..c7454cff
--- /dev/null
+++ b/src/components/tabContentComponents/galleryContent.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- Grid managing tab content -->
+
+  <div class="view-component uk-height-1-1 uk-width-expand">
+    <galleryDisplay />
+  </div>
+</template>
+
+<script>
+import galleryDisplay from "../viewComponents/galleryDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    galleryDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/navigateContent.vue b/src/components/tabContentComponents/navigateContent.vue
new file mode 100644
index 00000000..f29d4c5f
--- /dev/null
+++ b/src/components/tabContentComponents/navigateContent.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">
+      <paneNavigate />
+    </div>
+    <div class="view-component uk-width-expand">
+      <streamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneNavigate from "../controlComponents/paneNavigate";
+import streamDisplay from "../viewComponents/streamDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneNavigate,
+    streamDisplay
+  }
+};
+</script>
diff --git a/src/components/tabContentComponents/settingsContent.vue b/src/components/tabContentComponents/settingsContent.vue
new file mode 100644
index 00000000..0ca131ce
--- /dev/null
+++ b/src/components/tabContentComponents/settingsContent.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">
+      <paneStatus />
+    </div>
+    <div class="view-component uk-width-expand uk-padding-small">
+      <settingsDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneStatus from "../controlComponents/paneStatus";
+import settingsDisplay from "../viewComponents/settingsDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneStatus,
+    settingsDisplay
+  }
+};
+</script>
diff --git a/src/components/viewComponents/galleryComponents/zipDownloader.vue b/src/components/viewComponents/galleryComponents/zipDownloader.vue
index 7a83c927..f9242565 100644
--- a/src/components/viewComponents/galleryComponents/zipDownloader.vue
+++ b/src/components/viewComponents/galleryComponents/zipDownloader.vue
@@ -63,8 +63,19 @@ export default {
     }
   },
 
-  mounted() {
-    this.updateZipperUri();
+  created: function() {
+    // Watch for host 'ready', then update status
+    this.unwatchStoreFunction = this.$store.watch(
+      (state, getters) => {
+        return getters.ready;
+      },
+      ready => {
+        if (ready) {
+          // If the connection is now ready, update zipper URL
+          this.updateZipperUri();
+        }
+      }
+    );
   },
 
   methods: {
diff --git a/src/components/controlComponents/settingsComponents/appSettings.vue b/src/components/viewComponents/settingsComponents/appSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/appSettings.vue
rename to src/components/viewComponents/settingsComponents/appSettings.vue
diff --git a/src/components/controlComponents/settingsComponents/cameraSettings.vue b/src/components/viewComponents/settingsComponents/cameraSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/cameraSettings.vue
rename to src/components/viewComponents/settingsComponents/cameraSettings.vue
diff --git a/src/components/controlComponents/settingsComponents/microscopeSettings.vue b/src/components/viewComponents/settingsComponents/microscopeSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/microscopeSettings.vue
rename to src/components/viewComponents/settingsComponents/microscopeSettings.vue
diff --git a/src/components/controlComponents/settingsComponents/streamSettings.vue b/src/components/viewComponents/settingsComponents/streamSettings.vue
similarity index 100%
rename from src/components/controlComponents/settingsComponents/streamSettings.vue
rename to src/components/viewComponents/settingsComponents/streamSettings.vue
diff --git a/src/components/viewComponents/settingsDisplay.vue b/src/components/viewComponents/settingsDisplay.vue
new file mode 100644
index 00000000..fca7c060
--- /dev/null
+++ b/src/components/viewComponents/settingsDisplay.vue
@@ -0,0 +1,40 @@
+<template>
+  <div id="settingsDisplay" class="uk-padding">
+    <div class="uk-child-width-expand@m" uk-grid>
+      <div>
+        <h3>System settings</h3>
+        <appSettings />
+        <streamSettings />
+      </div>
+      <div v-if="$store.getters.ready">
+        <h3>Camera settings</h3>
+        <cameraSettings />
+      </div>
+      <div v-if="$store.getters.ready">
+        <h3>Microscope settings</h3>
+        <microscopeSettings />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import streamSettings from "./settingsComponents/streamSettings.vue";
+import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
+import cameraSettings from "./settingsComponents/cameraSettings.vue";
+import appSettings from "./settingsComponents/appSettings.vue";
+
+// Export main app
+export default {
+  name: "SettingsDisplay",
+
+  components: {
+    streamSettings,
+    cameraSettings,
+    microscopeSettings,
+    appSettings
+  }
+};
+</script>
+
+<style lang="less"></style>

From 1380cc9f365bc145a697fea178f1456602c19541 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 14:07:11 +0000
Subject: [PATCH 03/14] Started shifting extension forms into new nav layout

---
 .../controlComponents/panePlugins.vue         | 17 ------
 src/components/panelLeft.vue                  | 12 ++---
 src/components/pluginComponents/JsonForm.vue  |  1 +
 .../tabContentComponents/extensionContent.vue | 52 +++++++++++++++++++
 .../viewComponents/settingsDisplay.vue        | 16 +++---
 5 files changed, 67 insertions(+), 31 deletions(-)
 delete mode 100644 src/components/controlComponents/panePlugins.vue
 create mode 100644 src/components/tabContentComponents/extensionContent.vue

diff --git a/src/components/controlComponents/panePlugins.vue b/src/components/controlComponents/panePlugins.vue
deleted file mode 100644
index 6c82d3ad..00000000
--- a/src/components/controlComponents/panePlugins.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div id="panePlugins">
-    <h3>Plugins</h3>
-    <div class="uk-placeholder uk-text-center">
-      Plugin support coming soon...
-    </div>
-  </div>
-</template>
-
-<script>
-// Export main app
-export default {
-  name: "PanePlugins"
-};
-</script>
-
-<style lang="less"></style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 7c81f70e..8a518345 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -122,7 +122,7 @@
           :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
           class="uk-flex uk-flex-column"
         >
-          <JsonForm
+          <extensionContent
             :name="form.name"
             :route="form.route"
             :is-task="form.isTask"
@@ -145,16 +145,13 @@ import axios from "axios";
 import tabIcon from "./genericComponents/tabIcon";
 import tabContent from "./genericComponents/tabContent";
 
-// Import control components
-import paneNavigate from "./controlComponents/paneNavigate";
-import paneCapture from "./controlComponents/paneCapture";
-
 // Import new content components
 import connectContent from "./tabContentComponents/connectContent.vue";
 import navigateContent from "./tabContentComponents/navigateContent.vue";
 import captureContent from "./tabContentComponents/captureContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import galleryContent from "./tabContentComponents/galleryContent.vue";
+import extensionContent from "./tabContentComponents/extensionContent.vue";
 
 // Import plugin components
 import JsonForm from "./pluginComponents/JsonForm";
@@ -166,14 +163,13 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    paneNavigate,
-    paneCapture,
     JsonForm,
     connectContent,
     navigateContent,
     captureContent,
     settingsContent,
-    galleryContent
+    galleryContent,
+    extensionContent
   },
 
   data: function() {
diff --git a/src/components/pluginComponents/JsonForm.vue b/src/components/pluginComponents/JsonForm.vue
index 81587134..340eb5a9 100644
--- a/src/components/pluginComponents/JsonForm.vue
+++ b/src/components/pluginComponents/JsonForm.vue
@@ -203,6 +203,7 @@ export default {
 
     updateForm() {
       // Trigger a plugin form update
+      console.log("Emitting reloadForms");
       this.$emit("reloadForms");
     },
 
diff --git a/src/components/tabContentComponents/extensionContent.vue b/src/components/tabContentComponents/extensionContent.vue
new file mode 100644
index 00000000..db81dfe2
--- /dev/null
+++ b/src/components/tabContentComponents/extensionContent.vue
@@ -0,0 +1,52 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <JsonForm v-bind="$props" v-on="$listeners" />
+    </div>
+    <div class="view-component uk-width-expand"></div>
+  </div>
+</template>
+
+<script>
+import JsonForm from "../pluginComponents/JsonForm";
+
+export default {
+  name: "ExtensionContent",
+
+  components: {
+    JsonForm
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: "Plugin"
+    },
+    schema: {
+      type: Array,
+      required: true
+    },
+    route: {
+      type: String,
+      required: true
+    },
+    isTask: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    submitLabel: {
+      type: String,
+      required: false,
+      default: "Submit"
+    },
+    emitOnResponse: {
+      type: String,
+      required: false,
+      default: null
+    }
+  }
+};
+</script>
diff --git a/src/components/viewComponents/settingsDisplay.vue b/src/components/viewComponents/settingsDisplay.vue
index fca7c060..8b457552 100644
--- a/src/components/viewComponents/settingsDisplay.vue
+++ b/src/components/viewComponents/settingsDisplay.vue
@@ -6,13 +6,17 @@
         <appSettings />
         <streamSettings />
       </div>
-      <div v-if="$store.getters.ready">
-        <h3>Camera settings</h3>
-        <cameraSettings />
+      <div>
+        <div v-if="$store.getters.ready">
+          <h3>Camera settings</h3>
+          <cameraSettings />
+        </div>
       </div>
-      <div v-if="$store.getters.ready">
-        <h3>Microscope settings</h3>
-        <microscopeSettings />
+      <div>
+        <div v-if="$store.getters.ready">
+          <h3>Microscope settings</h3>
+          <microscopeSettings />
+        </div>
       </div>
     </div>
   </div>

From 2b8df04e4d2009917901ac18114dd525ed15eea9 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 16:41:39 +0000
Subject: [PATCH 04/14] Fixed extension form panel layout

---
 src/components/panelLeft.vue                 | 2 +-
 src/components/pluginComponents/JsonForm.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 8a518345..46d70728 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -120,7 +120,7 @@
         <div
           v-for="form in plugin.forms"
           :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
-          class="uk-flex uk-flex-column"
+          class="uk-height-1-1 uk-width-1-1"
         >
           <extensionContent
             :name="form.name"
diff --git a/src/components/pluginComponents/JsonForm.vue b/src/components/pluginComponents/JsonForm.vue
index 340eb5a9..5d93e950 100644
--- a/src/components/pluginComponents/JsonForm.vue
+++ b/src/components/pluginComponents/JsonForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="uk-padding-small">
     <div class="uk-flex">
       <div class="uk-text-bold uk-text-uppercase uk-width-expand">
         {{ name }}

From 86e8c5d7494c190ab64273a5412f826e91ab18c4 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 17:21:06 +0000
Subject: [PATCH 05/14] Fixed lite-mode regression

---
 src/components/tabContentComponents/connectContent.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/tabContentComponents/connectContent.vue b/src/components/tabContentComponents/connectContent.vue
index db98b3fc..7ee35131 100644
--- a/src/components/tabContentComponents/connectContent.vue
+++ b/src/components/tabContentComponents/connectContent.vue
@@ -2,7 +2,8 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="view-component uk-width-expand">
-      <connectDisplay />
+      <connectDisplayLite v-if="liteMode" />
+      <connectDisplay v-else />
     </div>
   </div>
 </template>
@@ -15,6 +16,12 @@ export default {
 
   components: {
     connectDisplay
+  },
+
+  data: function() {
+    return {
+      liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false
+    };
   }
 };
 </script>

From e6b88dd40d913cf43bafd3f79a8d2666ae005dbf Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 17:21:29 +0000
Subject: [PATCH 06/14] Show streamDisplay on extensions by default

---
 src/components/tabContentComponents/extensionContent.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/tabContentComponents/extensionContent.vue b/src/components/tabContentComponents/extensionContent.vue
index db81dfe2..95b83d28 100644
--- a/src/components/tabContentComponents/extensionContent.vue
+++ b/src/components/tabContentComponents/extensionContent.vue
@@ -4,18 +4,20 @@
     <div class="control-component">
       <JsonForm v-bind="$props" v-on="$listeners" />
     </div>
-    <div class="view-component uk-width-expand"></div>
+    <div class="view-component uk-width-expand"><streamDisplay /></div>
   </div>
 </template>
 
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
+import streamDisplay from "../viewComponents/streamDisplay.vue";
 
 export default {
   name: "ExtensionContent",
 
   components: {
-    JsonForm
+    JsonForm,
+    streamDisplay
   },
 
   props: {

From 5a0370a7b761e5003c1dcf5aff8f97b08431654e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 16 Mar 2020 17:25:30 +0000
Subject: [PATCH 07/14] Hide connect tab in lite mode

---
 src/components/panelLeft.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 46d70728..91d4ed92 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -10,6 +10,7 @@
       class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
     >
       <tabIcon
+        v-show="!liteMode"
         id="connect"
         :require-connection="false"
         :current-tab="currentTab"
@@ -153,9 +154,6 @@ import settingsContent from "./tabContentComponents/settingsContent.vue";
 import galleryContent from "./tabContentComponents/galleryContent.vue";
 import extensionContent from "./tabContentComponents/extensionContent.vue";
 
-// Import plugin components
-import JsonForm from "./pluginComponents/JsonForm";
-
 // Export main app
 export default {
   name: "PanelLeft",
@@ -163,7 +161,6 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    JsonForm,
     connectContent,
     navigateContent,
     captureContent,
@@ -176,7 +173,8 @@ export default {
     return {
       plugins: [],
       currentTab: "connect",
-      unwatchStoreFunction: null
+      unwatchStoreFunction: null,
+      liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false
     };
   },
 

From a8730d0a15c1621f0b0333db2757763aeeb150a4 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 17 Mar 2020 15:08:39 +0000
Subject: [PATCH 08/14] If connected, update components on mount

---
 .../galleryComponents/zipDownloader.vue       | 43 +++++++++------
 .../viewComponents/galleryDisplay.vue         | 55 +++++++++++--------
 2 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/components/viewComponents/galleryComponents/zipDownloader.vue b/src/components/viewComponents/galleryComponents/zipDownloader.vue
index f9242565..c3eb4fbc 100644
--- a/src/components/viewComponents/galleryComponents/zipDownloader.vue
+++ b/src/components/viewComponents/galleryComponents/zipDownloader.vue
@@ -63,6 +63,10 @@ export default {
     }
   },
 
+  mounted: function() {
+    this.updateZipperUri();
+  },
+
   created: function() {
     // Watch for host 'ready', then update status
     this.unwatchStoreFunction = this.$store.watch(
@@ -80,23 +84,28 @@ export default {
 
   methods: {
     updateZipperUri: function() {
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.zipbuilder"
-          );
-          // if ZipBuilderPlugin is enabled
-          if (foundExtension) {
-            // Get plugin action links
-            this.zipBuilderUri = foundExtension.links.build.href;
-            this.zipGetterUri = foundExtension.links.get.href;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+      if (this.$store.state.available) {
+        axios
+          .get(this.pluginsUri) // Get a list of plugins
+          .then(response => {
+            var plugins = response.data;
+            var foundExtension = plugins.find(
+              e => e.title === "org.openflexure.zipbuilder"
+            );
+            // if ZipBuilderPlugin is enabled
+            if (foundExtension) {
+              // Get plugin action links
+              this.zipBuilderUri = foundExtension.links.build.href;
+              this.zipGetterUri = foundExtension.links.get.href;
+            }
+          })
+          .catch(error => {
+            this.modalError(error); // Let mixin handle error
+          });
+      } else {
+        this.zipBuilderUri = null;
+        this.zipGetterUri = null;
+      }
     },
 
     resetZipper: function() {
diff --git a/src/components/viewComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
index 8c331530..14f0b0c1 100644
--- a/src/components/viewComponents/galleryDisplay.vue
+++ b/src/components/viewComponents/galleryDisplay.vue
@@ -9,14 +9,14 @@
       >
         <ul class="uk-navbar-nav">
           <li :class="[sortDescending ? 'uk-active' : '']">
-            <a class="uk-icon" href="#" @click="sortDescending = true"
-              ><i class="material-icons">keyboard_arrow_down</i></a
-            >
+            <a class="uk-icon" href="#" @click="sortDescending = true">
+              <i class="material-icons">keyboard_arrow_down</i>
+            </a>
           </li>
           <li :class="[!sortDescending ? 'uk-active' : '']">
-            <a class="uk-icon" href="#" @click="sortDescending = false"
-              ><i class="material-icons">keyboard_arrow_up</i></a
-            >
+            <a class="uk-icon" href="#" @click="sortDescending = false">
+              <i class="material-icons">keyboard_arrow_up</i>
+            </a>
           </li>
           <li>
             <a href="#">Filter</a>
@@ -34,8 +34,8 @@
                     :key="tag"
                     class="uk-margin-small"
                   >
-                    <label
-                      ><input
+                    <label>
+                      <input
                         :id="tag"
                         v-model="checkedTags"
                         class="uk-checkbox"
@@ -43,8 +43,8 @@
                         :value="tag"
                         checked
                       />
-                      {{ tag }}</label
-                    >
+                      {{ tag }}
+                    </label>
                   </div>
                 </form>
               </ul>
@@ -80,12 +80,17 @@
         v-if="galleryFolder"
         class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"
       >
-        <a href="#" class="uk-icon uk-margin-remove" @click="galleryFolder = ''"
-          ><i class="material-icons">arrow_back</i></a
+        <a
+          href="#"
+          class="uk-icon uk-margin-remove"
+          @click="galleryFolder = ''"
         >
+          <i class="material-icons">arrow_back</i>
+        </a>
         <div class="uk-margin-left">
           <h3 class="uk-margin-remove uk-margin-left">
-            <b>SCAN</b> {{ allScans[galleryFolder].metadata.image.name }}
+            <b>SCAN</b>
+            {{ allScans[galleryFolder].metadata.image.name }}
           </h3>
         </div>
       </div>
@@ -267,6 +272,8 @@ export default {
   },
 
   mounted() {
+    // Update on mount (does nothing if not connected)
+    this.updateCaptures();
     // A global signal listener to perform a gallery refresh
     this.$root.$on("globalUpdateCaptures", () => {
       this.updateCaptures();
@@ -309,15 +316,19 @@ export default {
 
   methods: {
     updateCaptures: function() {
-      console.log("Updating capture list...");
-      axios
-        .get(this.capturesUri)
-        .then(response => {
-          this.captures = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+      if (this.$store.state.available) {
+        console.log("Updating capture list...");
+        axios
+          .get(this.capturesUri)
+          .then(response => {
+            this.captures = response.data;
+          })
+          .catch(error => {
+            this.modalError(error); // Let mixin handle error
+          });
+      } else {
+        console.log("Delaying capture update until connection is available");
+      }
     },
 
     filterCaptures: function(list, filterTags) {

From a9506c4abc0e1a57d091dbdb6a55a97036bc32e8 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 17 Mar 2020 15:08:59 +0000
Subject: [PATCH 09/14] Enable extension-defined choice of view panel

---
 src/components/panelLeft.vue                    |  1 +
 .../tabContentComponents/extensionContent.vue   | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 91d4ed92..3bc22cc3 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -130,6 +130,7 @@
             :submit-label="form.submitLabel"
             :schema="form.schema"
             :emit-on-response="form.emitOnResponse"
+            :view-panel="form.viewPanel"
             @reloadForms="updatePlugins()"
           />
           <hr />
diff --git a/src/components/tabContentComponents/extensionContent.vue b/src/components/tabContentComponents/extensionContent.vue
index 95b83d28..de1e518d 100644
--- a/src/components/tabContentComponents/extensionContent.vue
+++ b/src/components/tabContentComponents/extensionContent.vue
@@ -4,20 +4,28 @@
     <div class="control-component">
       <JsonForm v-bind="$props" v-on="$listeners" />
     </div>
-    <div class="view-component uk-width-expand"><streamDisplay /></div>
+    <div class="view-component uk-width-expand">
+      <galleryDisplay v-if="viewPanel == 'gallery'" />
+      <settingsDisplay v-else-if="viewPanel == 'settings'" />
+      <streamDisplay v-else />
+    </div>
   </div>
 </template>
 
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
 import streamDisplay from "../viewComponents/streamDisplay.vue";
+import galleryDisplay from "../viewComponents/galleryDisplay.vue";
+import settingsDisplay from "../viewComponents/settingsDisplay.vue";
 
 export default {
   name: "ExtensionContent",
 
   components: {
     JsonForm,
-    streamDisplay
+    streamDisplay,
+    galleryDisplay,
+    settingsDisplay
   },
 
   props: {
@@ -48,6 +56,11 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    viewPanel: {
+      type: String,
+      required: false,
+      default: "stream"
     }
   }
 };

From d8626b7e130803b8b0bcc4eb8f4716acd4a621c9 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 17 Mar 2020 17:39:11 +0000
Subject: [PATCH 10/14] Improved settings layout

---
 .../settingsComponents/microscopeSettings.vue |  6 ++--
 .../settingsComponents/streamSettings.vue     | 32 ++++++++-----------
 .../viewComponents/settingsDisplay.vue        | 32 ++++++++++++-------
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/components/viewComponents/settingsComponents/microscopeSettings.vue b/src/components/viewComponents/settingsComponents/microscopeSettings.vue
index 601df633..4a1c77a4 100644
--- a/src/components/viewComponents/settingsComponents/microscopeSettings.vue
+++ b/src/components/viewComponents/settingsComponents/microscopeSettings.vue
@@ -1,8 +1,6 @@
 <template>
   <div v-if="settings" id="microscopeSettings">
     <form @submit.prevent="applyConfigRequest">
-      <h4>Stage</h4>
-
       <label class="uk-form-label" for="form-stacked-text"
         >Backlash compensation</label
       >
@@ -41,7 +39,7 @@
         </div>
       </div>
 
-      <h4>Microscope</h4>
+      <br />
 
       <div>
         <label class="uk-form-label" for="form-stacked-text"
@@ -55,6 +53,8 @@
         />
       </div>
 
+      <br />
+
       <button
         type="submit"
         class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1"
diff --git a/src/components/viewComponents/settingsComponents/streamSettings.vue b/src/components/viewComponents/settingsComponents/streamSettings.vue
index 45cd987e..95016673 100644
--- a/src/components/viewComponents/settingsComponents/streamSettings.vue
+++ b/src/components/viewComponents/settingsComponents/streamSettings.vue
@@ -7,24 +7,20 @@
       >
     </p>
 
-    <div class="uk-child-width-1-2" uk-grid>
-      <p>
-        <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
-          ><input
-            v-model="autoGpuPreview"
-            class="uk-checkbox"
-            type="checkbox"
-          />
-          GPU preview</label
-        >
-      </p>
-      <p>
-        <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
-          ><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
-          Track window</label
-        >
-      </p>
-    </div>
+    <hr />
+
+    <p>
+      <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
+        ><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox" />
+        GPU preview</label
+      >
+    </p>
+    <p>
+      <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
+        ><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
+        Track window</label
+      >
+    </p>
   </div>
 </template>
 
diff --git a/src/components/viewComponents/settingsDisplay.vue b/src/components/viewComponents/settingsDisplay.vue
index 8b457552..798d5613 100644
--- a/src/components/viewComponents/settingsDisplay.vue
+++ b/src/components/viewComponents/settingsDisplay.vue
@@ -1,19 +1,22 @@
 <template>
-  <div id="settingsDisplay" class="uk-padding">
-    <div class="uk-child-width-expand@m" uk-grid>
-      <div>
-        <h3>System settings</h3>
-        <appSettings />
-        <streamSettings />
+  <div id="settingsDisplay" class="uk-padding uk-height-1-1">
+    <div class="uk-height-1-1 uk-child-width-expand@m" uk-grid>
+      <div class="uk-padding-remove">
+        <div class="settings-pane uk-padding-small">
+          <h3>System settings</h3>
+          <appSettings />
+          <hr />
+          <streamSettings />
+        </div>
       </div>
-      <div>
-        <div v-if="$store.getters.ready">
+      <div class="uk-padding-remove">
+        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
           <h3>Camera settings</h3>
           <cameraSettings />
         </div>
       </div>
-      <div>
-        <div v-if="$store.getters.ready">
+      <div class="uk-padding-remove">
+        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
           <h3>Microscope settings</h3>
           <microscopeSettings />
         </div>
@@ -41,4 +44,11 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.settings-pane {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+  min-height: 100%;
+}
+</style>

From 0a1b138bcb23c68ca37d933cfbe6d158a76c4bcf Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 17 Mar 2020 17:39:20 +0000
Subject: [PATCH 11/14] Improved gallery layout

---
 .../galleryComponents/captureCard.vue         |  2 +-
 .../galleryComponents/scanCard.vue            |  2 +-
 .../viewComponents/galleryDisplay.vue         | 34 ++++++++++++++++---
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/viewComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
index 91e34139..3bf5cd29 100644
--- a/src/components/viewComponents/galleryComponents/captureCard.vue
+++ b/src/components/viewComponents/galleryComponents/captureCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium"
+    class="capture-card uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium"
     :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }"
   >
     <div class="uk-card-media-top">
diff --git a/src/components/viewComponents/galleryComponents/scanCard.vue b/src/components/viewComponents/galleryComponents/scanCard.vue
index bcdb7696..71dc493a 100644
--- a/src/components/viewComponents/galleryComponents/scanCard.vue
+++ b/src/components/viewComponents/galleryComponents/scanCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="captureCard uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium"
+    class="capture-card uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium"
   >
     <div class="uk-card-media-top">
       <a href="#">
diff --git a/src/components/viewComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
index 14f0b0c1..ed596f1b 100644
--- a/src/components/viewComponents/galleryDisplay.vue
+++ b/src/components/viewComponents/galleryDisplay.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="galleryDisplay uk-padding uk-padding-remove-top">
+    <!-- Gallery nav bar -->
     <nav
-      class="uk-navbar-container uk-navbar-transparent navbar"
+      class="gallery-navbar uk-navbar-container uk-navbar-transparent"
       uk-navbar="mode: click"
     >
+      <!-- Left side controls -->
       <div
         class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"
       >
@@ -53,6 +55,7 @@
         </ul>
       </div>
 
+      <!-- Right side buttons -->
       <div class="uk-navbar-right">
         <div class="uk-grid">
           <div>
@@ -71,14 +74,16 @@
       </div>
     </nav>
 
+    <!-- Gallery -->
     <div
       v-if="$store.getters.ready"
       class="uk-padding-remove-top"
       uk-lightbox="toggle: .lightbox-link"
     >
+      <!-- Folder heading -->
       <div
         v-if="galleryFolder"
-        class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"
+        class="gallery-folder-heading uk-flex uk-flex-middle"
       >
         <a
           href="#"
@@ -95,7 +100,8 @@
         </div>
       </div>
 
-      <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
+      <!-- Gallery capture cards -->
+      <div class="gallery-grid">
         <div v-for="item in sortedItems" :key="item.metadata.id">
           <scanCard
             v-if="'isScan' in item"
@@ -374,9 +380,29 @@ export default {
 </script>
 
 <style scoped lang="less">
-.navbar {
+.gallery-navbar {
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
 }
+.gallery-navbar,
+.gallery-folder-heading {
+  margin-bottom: 30px;
+}
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 320px);
+  justify-content: center;
+}
+.gallery-grid > div {
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+/deep/ .capture-card {
+  width: 300px;
+  height: 100%; // Used to have all cards in a row match their heights
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>

From 9c309fc791dd5443c3d45e67bc6e5aac77244639 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 18 Mar 2020 17:51:10 +0000
Subject: [PATCH 12/14] Added support for loading extension Web Components

---
 package-lock.json                             | 14 +++--
 package.json                                  |  1 +
 src/components/panelLeft.vue                  | 23 ++-----
 .../pluginComponents/WebComponentLoader.vue   | 61 +++++++++++++++++++
 .../tabContentComponents/extensionContent.vue | 51 +++++++++-------
 src/main.js                                   |  4 ++
 6 files changed, 108 insertions(+), 46 deletions(-)
 create mode 100644 src/components/pluginComponents/WebComponentLoader.vue

diff --git a/package-lock.json b/package-lock.json
index 79596939..bd07ec56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8586,14 +8586,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -8613,8 +8611,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -8762,7 +8759,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -16021,6 +16017,12 @@
         }
       }
     },
+    "vue-plugin-load-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-plugin-load-script/-/vue-plugin-load-script-1.2.0.tgz",
+      "integrity": "sha512-QbWjZSFRToSP6S0nZFsH618PsTlZgSg8m8Xv602vezznLTHYd0wAXEw0jlYND7L6BMe0KcA7cvUwLROyfBlQ4w==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index cd6d9e48..53a0ae4d 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "mdns-js": "^1.0.3",
     "uikit": "^3.3.3",
     "vue": "^2.6.11",
+    "vue-plugin-load-script": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
     "vuex": "^3.1.2"
   },
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 3bc22cc3..b6f93c60 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -118,23 +118,12 @@
         :require-connection="plugin.requiresConnection"
         :current-tab="currentTab"
       >
-        <div
-          v-for="form in plugin.forms"
-          :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
-          class="uk-height-1-1 uk-width-1-1"
-        >
-          <extensionContent
-            :name="form.name"
-            :route="form.route"
-            :is-task="form.isTask"
-            :submit-label="form.submitLabel"
-            :schema="form.schema"
-            :emit-on-response="form.emitOnResponse"
-            :view-panel="form.viewPanel"
-            @reloadForms="updatePlugins()"
-          />
-          <hr />
-        </div>
+        <extensionContent
+          :forms="plugin.forms"
+          :web-component="plugin.wc"
+          :view-panel="plugin.viewPanel"
+          @reloadForms="updatePlugins()"
+        />
       </tabContent>
     </div>
   </div>
diff --git a/src/components/pluginComponents/WebComponentLoader.vue b/src/components/pluginComponents/WebComponentLoader.vue
new file mode 100644
index 00000000..f155617d
--- /dev/null
+++ b/src/components/pluginComponents/WebComponentLoader.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div v-if="error" class="uk-padding-small uk-text-danger">
+      <b>{{ error }}</b>
+    </div>
+    <component
+      :is="componentName"
+      v-if="ready"
+      :component-base-u-r-l="ApiRootURL"
+    ></component>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WebComponentLoader",
+
+  props: {
+    componentURL: {
+      type: String,
+      required: true
+    },
+    componentName: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      ready: false,
+      error: null
+    };
+  },
+
+  computed: {
+    ApiRootURL: function() {
+      return `${this.$store.getters.baseUri}/api/v2`;
+    }
+  },
+
+  mounted() {
+    // Method 2
+    this.$loadScript(this.componentURL)
+      .then(() => {
+        const el = customElements.get(this.componentName);
+        if (el) {
+          this.ready = true;
+        } else {
+          this.error = `Error: No component ${this.componentName} found.`;
+        }
+        this.ready = true;
+      })
+      .catch(() => {
+        this.ready = false;
+      });
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/tabContentComponents/extensionContent.vue b/src/components/tabContentComponents/extensionContent.vue
index de1e518d..c42e02d1 100644
--- a/src/components/tabContentComponents/extensionContent.vue
+++ b/src/components/tabContentComponents/extensionContent.vue
@@ -2,7 +2,28 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component">
-      <JsonForm v-bind="$props" v-on="$listeners" />
+      <div v-if="webComponent">
+        <WebComponentLoader
+          :component-u-r-l="webComponent.href"
+          :component-name="webComponent.name"
+        />
+      </div>
+      <!-- Handle OpenFlexure eV Forms -->
+      <div
+        v-for="form in forms"
+        :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
+        class="uk-height-1-1 uk-width-1-1"
+      >
+        <JsonForm
+          :name="form.name"
+          :route="form.route"
+          :is-task="form.isTask"
+          :submit-label="form.submitLabel"
+          :schema="form.schema"
+          :emit-on-response="form.emitOnResponse"
+          v-on="$listeners"
+        />
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <galleryDisplay v-if="viewPanel == 'gallery'" />
@@ -14,6 +35,7 @@
 
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
+import WebComponentLoader from "../pluginComponents/WebComponentLoader";
 import streamDisplay from "../viewComponents/streamDisplay.vue";
 import galleryDisplay from "../viewComponents/galleryDisplay.vue";
 import settingsDisplay from "../viewComponents/settingsDisplay.vue";
@@ -23,37 +45,20 @@ export default {
 
   components: {
     JsonForm,
+    WebComponentLoader,
     streamDisplay,
     galleryDisplay,
     settingsDisplay
   },
 
   props: {
-    name: {
-      type: String,
-      required: false,
-      default: "Plugin"
-    },
-    schema: {
+    forms: {
       type: Array,
-      required: true
-    },
-    route: {
-      type: String,
-      required: true
-    },
-    isTask: {
-      type: Boolean,
       required: false,
-      default: false
+      default: () => []
     },
-    submitLabel: {
-      type: String,
-      required: false,
-      default: "Submit"
-    },
-    emitOnResponse: {
-      type: String,
+    webComponent: {
+      type: Object,
       required: false,
       default: null
     },
diff --git a/src/main.js b/src/main.js
index c12c17b5..d768db37 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,10 @@ import UIkit from "uikit";
 // Import MD icons
 import "material-design-icons/iconfont/material-icons.css";
 
+// Import load-script module
+import LoadScript from "vue-plugin-load-script";
+Vue.use(LoadScript);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({

From 6105dc63b53bc48d7045bbd807bad599d2830d19 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 25 Mar 2020 16:43:19 +0000
Subject: [PATCH 13/14] Fixed tab switcher width

---
 src/components/genericComponents/tabIcon.vue | 1 +
 src/components/panelLeft.vue                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/genericComponents/tabIcon.vue b/src/components/genericComponents/tabIcon.vue
index 2460b111..37e893ab 100644
--- a/src/components/genericComponents/tabIcon.vue
+++ b/src/components/genericComponents/tabIcon.vue
@@ -92,6 +92,7 @@ export default {
   max-width: 60px;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 85%;
 }
 
 a:hover,
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index e65f7a38..e714eb44 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -259,6 +259,7 @@ export default {
 }
 
 #switcher-left {
+  width: 75px;
   background-color: rgba(180, 180, 180, 0.1);
   padding-top: 2px !important;
 }

From 8b9cf9c0c76db2fe798b02c126db1f14817c61cb Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 25 Mar 2020 16:44:36 +0000
Subject: [PATCH 14/14] Changed version to 2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d1b038a4..d33bc597 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "2.0.0",
+  "version": "2.1.0-alpha",
   "private": true,
   "description": "An electron-based user client for the OpenFlexure Microscope Server",
   "author": "OpenFlexure <contact@openflexure.org> (https://www.openflexure.org)",