From c1641f6bf99172c601dcff7aa40a57a1d5370915 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 9 Jun 2019 09:33:05 +0100
Subject: [PATCH 01/48] Rewritten responsive layout in main.Vue

---
 src/App.vue                     | 122 ++++++++++++++++++++++++++++----
 src/components/panelDisplay.vue |  57 ---------------
 src/components/panelLeft.vue    |  59 ---------------
 3 files changed, 108 insertions(+), 130 deletions(-)
 delete mode 100644 src/components/panelDisplay.vue
 delete mode 100644 src/components/panelLeft.vue

diff --git a/src/App.vue b/src/App.vue
index 96649f36..ec9f6b47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,56 @@
 <template>
   <div id="app" v-bind:class="handleTheme">
-    <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
-      <div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
-        <div id="overlay-toggle">
-          <a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
-        </div>
-        <div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
-          <panelLeft/>
-        </div>
+
+    <div v-if="this.onMobile" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
+      <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-auto uk-height-1-1">
+        <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
+          <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
+          <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
+        </ul>
+        <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
+          <li class="uk-width-expand"><paneConnect/></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
+          <li class="uk-width-expand"><paneSettings/></li>
+        </ul>
       </div>
-      <div id="main-panel-container" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-        <panelDisplay/>
+      <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
+        <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
+          <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
+          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
+        </ul>
+        <ul class="uk-switcher uk-flex uk-flex-1">
+          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
+        </ul>
       </div>
     </div>
+
+    <div v-else class="uk-height-1-1 uk-width-1-1 uk-margin-remove uk-padding-remove" margin=0>
+        <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
+          <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
+          <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
+          <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
+          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
+        </ul>
+        <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
+          <li class="uk-width-expand"><paneConnect/></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
+          <li class="uk-width-expand"><paneSettings/></li>
+          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
+        </ul>
+    </div>
+
   </div>
 </template>
 
@@ -23,16 +61,27 @@ import axios from 'axios'
 import UIkit from 'uikit';
 
 // Import components
-import panelLeft from './components/panelLeft.vue'
-import panelDisplay from './components/panelDisplay.vue'
+import paneConnect from './components/paneConnect.vue'
+import paneNavigate from './components/paneNavigate.vue'
+import paneCapture from './components/paneCapture.vue'
+import panePlugins from './components/panePlugins.vue'
+import paneSettings from './components/paneSettings.vue'
+// Import components
+import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
+import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
 
 // Export main app
 export default {
   name: 'app',
 
   components: {
-    panelLeft,
-    panelDisplay
+    streamDisplay,
+    galleryDisplay,
+    paneConnect,
+    paneNavigate,
+    paneCapture,
+    panePlugins,
+    paneSettings
   },
 
   data: function () {
@@ -67,6 +116,29 @@ export default {
     window.addEventListener('beforeunload', this.handleExit)
   },
 
+  mounted() {
+    // Attach methods to UIkit events for tab switching
+    var context = this;
+    // Gallery tab
+    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
+      console.log("Gallery tab entered")
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', false)
+      }
+      context.$root.$emit('globalUpdateCaptureList');
+    });
+
+    // Stream tab
+    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
+      console.log("Stream tab entered")
+      UIkit.update()
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', true)
+      }
+    });
+
+  },
+
   beforeDestroy: function () {
     window.removeEventListener('resize', this.handleResize)
   },
@@ -89,6 +161,14 @@ export default {
         'uk-light': this.$store.state.globalSettings.darkMode,
         'uk-background-secondary': this.$store.state.globalSettings.darkMode
       }
+    },
+    disableIfDisconnected: function () {
+      return {
+        'uk-disabled': !this.$store.getters.ready
+      }
+    },
+    onMobile: function () {
+      return (this.window.width >= 800) ? true : false 
     }
   }
 
@@ -148,4 +228,18 @@ body, html {
     opacity: 0.5;
 }
 
+.uk-tab {
+    padding-left: 0;
+}
+.panel-content {
+  width: 300px;
+  overflow: auto;
+}
+
+#panelLeft {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25)
+}
+
 </style>
diff --git a/src/components/panelDisplay.vue b/src/components/panelDisplay.vue
deleted file mode 100644
index f07c2efe..00000000
--- a/src/components/panelDisplay.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
-    <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
-      <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
-      <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
-    </ul>
-    <ul class="uk-switcher uk-flex uk-flex-1">
-      <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-      <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import UIkit from 'uikit';
-
-// Import components
-import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
-import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
-
-// Export main app
-export default {
-  name: 'panelDisplay',
-
-  components: {
-    streamDisplay,
-    galleryDisplay
-  },
-
-  mounted() {
-    // Attach methods to UIkit events for tab switching
-    var context = this;
-    // Gallery tab
-    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
-      console.log("Gallery tab entered")
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', false)
-      }
-      context.$root.$emit('globalUpdateCaptureList');
-    });
-
-    // Stream tab
-    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
-      console.log("Stream tab entered")
-      UIkit.update()
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', true)
-      }
-    });
-
-  }
-
-}
-</script>
-
-<style scoped lang="less">
-</style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
deleted file mode 100644
index 6997d46b..00000000
--- a/src/components/panelLeft.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
-    <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
-      <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
-      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
-    </ul>
-    <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
-      <li class="uk-width-expand"><paneConnect/></li>
-      <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
-      <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
-      <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
-      <li class="uk-width-expand"><paneSettings/></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-// Import components
-import paneConnect from './paneConnect.vue'
-import paneNavigate from './paneNavigate.vue'
-import paneCapture from './paneCapture.vue'
-import panePlugins from './panePlugins.vue'
-import paneSettings from './paneSettings.vue'
-
-// Export main app
-export default {
-  name: 'panelLeft',
-
-  components: {
-    paneConnect,
-    paneNavigate,
-    paneCapture,
-    panePlugins,
-    paneSettings
-  },
-
-  computed: {
-    disableIfDisconnected: function () {
-      return {
-        'uk-disabled': !this.$store.getters.ready
-      }
-    }
-  }
-
-}
-</script>
-
-<style lang="less">
-.uk-tab {
-    padding-left: 0;
-}
-.panel-content {
-  width: 300px;
-  overflow: auto;
-}
-</style>

From a35292b8e4b8a20f6f2e2b0dc126aa64128697cf Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 9 Jun 2019 20:19:40 +0100
Subject: [PATCH 02/48] Test shrunk heading

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

diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
index bbf83522..41de7f1c 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -2,7 +2,7 @@
 <div class="host-input">
   <div class="uk-margin">
 
-    <h3>Connect</h3>
+    <h4>Connect</h4>
 
     <form @submit.prevent="handleSubmit">
       <div class="uk-form-controls uk-margin">

From 5be408c171890c6733f171b8871c27ff58119756 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 9 Jun 2019 20:19:50 +0100
Subject: [PATCH 03/48] Testing left vertical tabs

---
 src/App.vue | 71 +++++++++++++++++++++++++----------------------------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ec9f6b47..adb06227 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,32 @@
 <template>
   <div id="app" v-bind:class="handleTheme">
 
-    <div v-if="this.onMobile" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
-      <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-auto uk-height-1-1">
-        <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
-          <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
-          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
-          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
-          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
-          <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
-        </ul>
-        <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
-          <li class="uk-width-expand"><paneConnect/></li>
-          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
-          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
-          <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
-          <li class="uk-width-expand"><paneSettings/></li>
-        </ul>
+    <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
+
+      <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
+
+        <div class="uk-padding-remove uk-height-1-1 uk-width-auto@m">
+          <ul id="component-switcher-left" class="uk-tab-right uk-height-1-1" uk-tab="connect: #component-tab-left">
+            <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a></li>
+            <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: right; title: Navigate"></a></li>
+            <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: right; title: Capture"></a></li>
+            <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: right; title: Plugins"></a></li>
+            <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: right; title: Settings"></a></li>
+          </ul>
+        </div>
+
+        <div class="uk-padding-remove uk-height-1-1 uk-width-expand@m">
+          <ul id="component-tab-left" class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
+            <li class="uk-width-expand"><paneConnect/></li>
+            <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
+            <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
+            <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
+            <li class="uk-width-expand"><paneSettings/></li>
+          </ul>
+        </div>
+
       </div>
+
       <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
         <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
           <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
@@ -28,27 +37,7 @@
           <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
         </ul>
       </div>
-    </div>
 
-    <div v-else class="uk-height-1-1 uk-width-1-1 uk-margin-remove uk-padding-remove" margin=0>
-        <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
-          <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
-          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
-          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
-          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
-          <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
-          <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
-          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
-        </ul>
-        <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
-          <li class="uk-width-expand"><paneConnect/></li>
-          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
-          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
-          <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
-          <li class="uk-width-expand"><paneSettings/></li>
-          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
-        </ul>
     </div>
 
   </div>
@@ -168,7 +157,7 @@ export default {
       }
     },
     onMobile: function () {
-      return (this.window.width >= 800) ? true : false 
+      return (this.window.width <= 800) ? true : false 
     }
   }
 
@@ -242,4 +231,12 @@ body, html {
   border-color: rgba(180, 180, 180, 0.25)
 }
 
+#component-switcher-left a{
+  padding: 10px 20px;
+}
+
+#component-switcher-left{
+  background-color: rgba(180, 180, 180, 0.1);
+}
+
 </style>

From 81bb14a812e294767d1c6b6ff7927a414a2fa81d Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Mon, 10 Jun 2019 08:33:53 +0100
Subject: [PATCH 04/48] Added custom left-tab logic

---
 src/App.vue | 58 +++++++++++++++++++++++++----------------------------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index adb06227..b2b84b4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,31 +6,29 @@
       <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
 
         <div class="uk-padding-remove uk-height-1-1 uk-width-auto@m">
-          <ul id="component-switcher-left" class="uk-tab-right uk-height-1-1" uk-tab="connect: #component-tab-left">
-            <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a></li>
-            <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: right; title: Navigate"></a></li>
-            <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: right; title: Capture"></a></li>
-            <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: right; title: Plugins"></a></li>
-            <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: right; title: Settings"></a></li>
-          </ul>
+          <div id="component-switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
+            <a href="#" @click="setTab('connect')" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a>
+            <a href="#" @click="setTab('navigate')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="location" uk-tooltip="pos: right; title: Navigate"></a>
+            <a href="#" @click="setTab('capture')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="camera" uk-tooltip="pos: right; title: Capture"></a>
+            <a href="#" @click="setTab('settings')" uk-icon="cog" uk-tooltip="pos: right; title: Settings"></a>
+          </div>
         </div>
 
-        <div class="uk-padding-remove uk-height-1-1 uk-width-expand@m">
-          <ul id="component-tab-left" class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
-            <li class="uk-width-expand"><paneConnect/></li>
-            <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
-            <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
-            <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
-            <li class="uk-width-expand"><paneSettings/></li>
-          </ul>
+        <div v-if="showControlBar" class="uk-padding-remove uk-height-1-1 uk-width-expand@m">
+          <div id="component-tab-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
+            <div v-if="currentTab=='connect'" class="uk-width-expand"><paneConnect/></div>
+            <div v-if="currentTab=='navigate'" class="uk-width-expand"><paneNavigate/></div>
+            <div v-if="currentTab=='capture'" class="uk-width-expand"><paneCapture/></div>
+            <div v-if="currentTab=='settings'" class="uk-width-expand"><paneSettings/></div>
+          </div>
         </div>
 
       </div>
 
       <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
         <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
-          <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
-          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
+          <li><a href="#" uk-switcher-item="preview">Live</a></li>
+          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
         </ul>
         <ul class="uk-switcher uk-flex uk-flex-1">
           <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
@@ -75,6 +73,8 @@ export default {
 
   data: function () {
     return {
+      currentTab: 'connect',
+      showControlBar: true,
       window: {
         width: 0,
         height: 0
@@ -85,20 +85,6 @@ export default {
   created: function () {
     var context = this
 
-    function handleSidebarEvent(context, event){
-      if (event.target.id == 'left-panel-container') {
-        console.log("Sidebar hidden")
-        context.$root.$emit('globalResizePreview')
-      }
-    }
-
-    UIkit.util.on(document, 'hidden', '#left-panel-container', function (e) {
-      handleSidebarEvent(context, e)
-    })
-    UIkit.util.on(document, 'shown', '#left-panel-container', function (e) {
-      handleSidebarEvent(context, e)
-    })
-
     window.addEventListener('resize', this.handleResize)
     this.handleResize();
 
@@ -133,6 +119,16 @@ export default {
   },
 
   methods: {
+    setTab: function(tabName) {
+      if (this.currentTab == tabName) {
+        this.showControlBar = !this.showControlBar
+      }
+      else {
+        this.showControlBar = true
+        this.currentTab = tabName
+      }
+    },
+
     handleResize: function(event) {
       this.window.width = window.innerWidth;
       this.window.height = window.innerHeight;

From d302a77d6e7ba9c0a0886f686d53996cc5b8400b Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Mon, 10 Jun 2019 09:05:16 +0100
Subject: [PATCH 05/48] Started fixing LESS

---
 src/App.vue                | 33 ++-------------------------------
 src/assets/less/theme.less |  9 +++++++--
 2 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b2b84b4a..416eee34 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
 
         <div class="uk-padding-remove uk-height-1-1 uk-width-auto@m">
           <div id="component-switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
-            <a href="#" @click="setTab('connect')" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a>
+            <a href="#" class="uk-link" @click="setTab('connect')" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a>
             <a href="#" @click="setTab('navigate')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="location" uk-tooltip="pos: right; title: Navigate"></a>
             <a href="#" @click="setTab('capture')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="camera" uk-tooltip="pos: right; title: Capture"></a>
             <a href="#" @click="setTab('settings')" uk-icon="cog" uk-tooltip="pos: right; title: Settings"></a>
@@ -179,35 +179,6 @@ body, html {
   overflow-x: hidden;
 }
 
-.overlay-panel {
-  position: fixed;
-  z-index: 99;
-}
-
-#overlay-toggle {
-    width: 0px;
-    height: 30px;
-    z-index: 999;
-    position: absolute;
-    right: -20px;
-    top: 24px;
-}
-
-.action-btn-outline {
-  border: 1px solid lightgray;
-}
-
-.uk-light .uk-icon-button {
-  background-color: rgb(52, 52, 52);
-}
-.uk-light .uk-icon-button:hover, .uk-light .uk-icon-button:focus {
-  background-color: rgb(70, 70, 70);
-}
-
-.uk-light .uk-card-default {
-  background: #222
-}
-
 .uk-disabled {
     pointer-events: none;
     opacity: 0.5;
@@ -228,7 +199,7 @@ body, html {
 }
 
 #component-switcher-left a{
-  padding: 10px 20px;
+  padding: 12px 20px;
 }
 
 #component-switcher-left{
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 26ed2ebd..4384f188 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -9,6 +9,7 @@
 
 // Custom OpenFlexure theming
 @global-primary-background: #C32280;
+@global-button-background: #C32280;
 
 // UIkit
 // ========================================================================
@@ -304,8 +305,12 @@ body { overflow: hidden; }
 }
 
 /*
- * Button
+ * Button and link
  */
+ .uk-link:hover, a:hover {
+    color: @global-button-background;
+ }
+
  .uk-button {
     border-radius: 2px;
  }
@@ -331,7 +336,7 @@ body { overflow: hidden; }
         color: @global-primary-background !important;
     }
 
-    .tm-button-primary:hover { box-shadow: 0 10px 40px rgba(30,135,240,1); }
+    .tm-button-primary:hover { box-shadow: 0 10px 40px @global-button-background; }
 
 }
 

From 0014d61f8909f2d0809750680d650970590164da Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 11:28:11 +0100
Subject: [PATCH 06/48] Moved tabicons into a component

---
 src/App.vue                | 79 ++++++++++++++++++++++++++++----------
 src/assets/less/theme.less |  8 ++--
 src/components/tabIcon.vue | 52 +++++++++++++++++++++++++
 3 files changed, 114 insertions(+), 25 deletions(-)
 create mode 100644 src/components/tabIcon.vue

diff --git a/src/App.vue b/src/App.vue
index 416eee34..fcba4640 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,22 +4,49 @@
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
 
       <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
-
-        <div class="uk-padding-remove uk-height-1-1 uk-width-auto@m">
-          <div id="component-switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
-            <a href="#" class="uk-link" @click="setTab('connect')" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a>
-            <a href="#" @click="setTab('navigate')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="location" uk-tooltip="pos: right; title: Navigate"></a>
-            <a href="#" @click="setTab('capture')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="camera" uk-tooltip="pos: right; title: Capture"></a>
-            <a href="#" @click="setTab('settings')" uk-icon="cog" uk-tooltip="pos: right; title: Settings"></a>
+        <div class="uk-padding-remove uk-height-1-1 uk-width-auto">
+          <div id="switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
+            <tabIcon 
+              id="connect"
+              name="Connect"
+              uk-icon="server"
+              :requireConnection="false"
+              :currentTab="currentTab"
+              @set-tab="setTab"
+            />
+            <tabIcon 
+              id="navigate"
+              name="Navigate"
+              uk-icon="location"
+              :requireConnection="true"
+              :currentTab="currentTab"
+              @set-tab="setTab"
+            />
+            <tabIcon 
+              id="capture"
+              name="Capture"
+              uk-icon="camera"
+              :requireConnection="true"
+              :currentTab="currentTab"
+              @set-tab="setTab"
+            />
+            <tabIcon 
+              id="settings"
+              name="Settings"
+              uk-icon="cog"
+              :requireConnection="false"
+              :currentTab="currentTab"
+              @set-tab="setTab"
+            />
           </div>
         </div>
 
-        <div v-if="showControlBar" class="uk-padding-remove uk-height-1-1 uk-width-expand@m">
-          <div id="component-tab-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
-            <div v-if="currentTab=='connect'" class="uk-width-expand"><paneConnect/></div>
-            <div v-if="currentTab=='navigate'" class="uk-width-expand"><paneNavigate/></div>
-            <div v-if="currentTab=='capture'" class="uk-width-expand"><paneCapture/></div>
-            <div v-if="currentTab=='settings'" class="uk-width-expand"><paneSettings/></div>
+        <div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
+          <div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
+            <div v-bind:hidden="currentTab!='connect'" class="uk-width-expand"><paneConnect/></div>
+            <div v-bind:hidden="currentTab!='navigate'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneNavigate/></div>
+            <div v-bind:hidden="currentTab!='capture'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneCapture/></div>
+            <div v-bind:hidden="currentTab!='settings'" class="uk-width-expand"><paneSettings/></div>
           </div>
         </div>
 
@@ -47,6 +74,9 @@ import axios from 'axios'
 // Import basic UIkit
 import UIkit from 'uikit';
 
+// Import components
+import tabIcon from './components/tabIcon.vue'
+
 // Import components
 import paneConnect from './components/paneConnect.vue'
 import paneNavigate from './components/paneNavigate.vue'
@@ -62,6 +92,7 @@ export default {
   name: 'app',
 
   components: {
+    tabIcon,
     streamDisplay,
     galleryDisplay,
     paneConnect,
@@ -119,13 +150,16 @@ export default {
   },
 
   methods: {
-    setTab: function(tabName) {
-      if (this.currentTab == tabName) {
+    setTab: function(event, tab) {
+      console.log(event)
+      console.log(tab)
+      if (this.currentTab == tab) {
         this.showControlBar = !this.showControlBar
+        this.currentTab = 'none'
       }
       else {
         this.showControlBar = true
-        this.currentTab = tabName
+        this.currentTab = tab
       }
     },
 
@@ -187,22 +221,25 @@ body, html {
 .uk-tab {
     padding-left: 0;
 }
-.panel-content {
+#component-left {
   width: 300px;
-  overflow: auto;
 }
 
-#panelLeft {
+#container-left {
+  overflow: hidden auto;
+}
+
+#container-left, #switcher-left {
   border-width: 0 1px 0 0;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25)
 }
 
-#component-switcher-left a{
+#switcher-left a{
   padding: 12px 20px;
 }
 
-#component-switcher-left{
+#switcher-left{
   background-color: rgba(180, 180, 180, 0.1);
 }
 
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 4384f188..f9ec1d7b 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -307,13 +307,13 @@ body { overflow: hidden; }
 /*
  * Button and link
  */
- .uk-link:hover, a:hover {
+.uk-link:hover, a:hover {
     color: @global-button-background;
- }
+}
 
- .uk-button {
+.uk-button {
     border-radius: 2px;
- }
+}
 
 .tm-button-default,
 .tm-button-primary { border-radius: 500px; }
diff --git a/src/components/tabIcon.vue b/src/components/tabIcon.vue
new file mode 100644
index 00000000..0824d97f
--- /dev/null
+++ b/src/components/tabIcon.vue
@@ -0,0 +1,52 @@
+<template>
+  <a 
+    href="#" 
+    :class="classObject" 
+    :uk-tooltip="tooltipOptions"
+    @click="setThisTab">
+  </a>
+
+</template>
+
+<script>
+
+export default {
+  name: 'tabIcon',
+  props: {
+    id: String,
+    currentTab: String,
+    requireConnection: Boolean,
+    name: String
+  },
+
+  methods: {
+    setThisTab(event, value) {
+      this.$emit('set-tab', event, this.id);
+    }
+  },
+
+  computed: {
+    tooltipOptions: function () {
+      return `pos: right; title: ${this.name}`
+    },
+
+    classObject: function () {
+      return {
+        'tabicon-active': this.currentTab == this.id,
+        'uk-disabled': (this.requireConnection && !this.$store.getters.ready)
+      }
+    }
+
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+// Custom UIkit CSS modifications
+@import "../assets/less/theme.less";
+
+.tabicon-active {
+  color: @global-button-background !important;
+}
+</style>
\ No newline at end of file

From cd82f00af395bd35eb4f5287f643c025d31301a5 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 11:54:35 +0100
Subject: [PATCH 07/48] Moved control tab content into components

---
 src/App.vue                   | 65 +++++++++++++----------------------
 src/components/tabContent.vue | 31 +++++++++++++++++
 src/components/tabIcon.vue    |  1 +
 3 files changed, 55 insertions(+), 42 deletions(-)
 create mode 100644 src/components/tabContent.vue

diff --git a/src/App.vue b/src/App.vue
index fcba4640..575122cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,49 +4,28 @@
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
 
       <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
-        <div class="uk-padding-remove uk-height-1-1 uk-width-auto">
-          <div id="switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
-            <tabIcon 
-              id="connect"
-              name="Connect"
-              uk-icon="server"
-              :requireConnection="false"
-              :currentTab="currentTab"
-              @set-tab="setTab"
-            />
-            <tabIcon 
-              id="navigate"
-              name="Navigate"
-              uk-icon="location"
-              :requireConnection="true"
-              :currentTab="currentTab"
-              @set-tab="setTab"
-            />
-            <tabIcon 
-              id="capture"
-              name="Capture"
-              uk-icon="camera"
-              :requireConnection="true"
-              :currentTab="currentTab"
-              @set-tab="setTab"
-            />
-            <tabIcon 
-              id="settings"
-              name="Settings"
-              uk-icon="cog"
-              :requireConnection="false"
-              :currentTab="currentTab"
-              @set-tab="setTab"
-            />
-          </div>
+
+        <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
+          <tabIcon id="connect" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+          <tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+          <tabIcon id="capture" name="Capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+          <tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
         </div>
 
         <div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
           <div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
-            <div v-bind:hidden="currentTab!='connect'" class="uk-width-expand"><paneConnect/></div>
-            <div v-bind:hidden="currentTab!='navigate'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneNavigate/></div>
-            <div v-bind:hidden="currentTab!='capture'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneCapture/></div>
-            <div v-bind:hidden="currentTab!='settings'" class="uk-width-expand"><paneSettings/></div>
+            <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
+              <paneConnect/>
+            </tabContent>
+            <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
+              <paneNavigate/>
+            </tabContent>
+            <tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
+              <paneCapture/>
+            </tabContent>
+            <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
+              <paneSettings/>
+            </tabContent>
           </div>
         </div>
 
@@ -76,6 +55,7 @@ import UIkit from 'uikit';
 
 // Import components
 import tabIcon from './components/tabIcon.vue'
+import tabContent from './components/tabContent.vue'
 
 // Import components
 import paneConnect from './components/paneConnect.vue'
@@ -93,6 +73,7 @@ export default {
 
   components: {
     tabIcon,
+    tabContent,
     streamDisplay,
     galleryDisplay,
     paneConnect,
@@ -214,12 +195,12 @@ body, html {
 }
 
 .uk-disabled {
-    pointer-events: none;
-    opacity: 0.5;
+  pointer-events: none;
+  opacity: 0.4;
 }
 
 .uk-tab {
-    padding-left: 0;
+  padding-left: 0;
 }
 #component-left {
   width: 300px;
diff --git a/src/components/tabContent.vue b/src/components/tabContent.vue
new file mode 100644
index 00000000..2a62409e
--- /dev/null
+++ b/src/components/tabContent.vue
@@ -0,0 +1,31 @@
+<template>
+  
+  <div 
+    v-if="!(this.requireConnection && !this.$store.getters.ready)"
+    v-bind:hidden="currentTab!=id" 
+    class="uk-width-expand"
+  >
+    <slot></slot>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'tabContent',
+
+  props: {
+    id: String,
+    currentTab: String,
+    requireConnection: Boolean,
+  },
+
+  methods: {},
+  computed: {}
+}
+
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/tabIcon.vue b/src/components/tabIcon.vue
index 0824d97f..bbead888 100644
--- a/src/components/tabIcon.vue
+++ b/src/components/tabIcon.vue
@@ -12,6 +12,7 @@
 
 export default {
   name: 'tabIcon',
+
   props: {
     id: String,
     currentTab: String,

From 04145d1704c371b63b9acf0a081c0ed01f2e6cb2 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 17:01:47 +0100
Subject: [PATCH 08/48] Enable UIkit updates

---
 package-lock.json | 43 +++++++++++++++++++++++++++++++------------
 package.json      |  2 +-
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 19b223fd..f3c5ef6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5187,7 +5187,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5208,12 +5209,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5228,17 +5231,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5355,7 +5361,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5367,6 +5374,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5381,6 +5389,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5388,12 +5397,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5412,6 +5423,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5492,7 +5504,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5504,6 +5517,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5589,7 +5603,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5625,6 +5640,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5644,6 +5660,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5687,12 +5704,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/package.json b/package.json
index 5e8b6685..e66358e6 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "electron-builder": "^20.39.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "uikit": "3.1.1",
+    "uikit": "^3.1.1",
     "vue": "^2.5.21",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.0.1"

From 6ac58f50248258bfc0575c48d5d0e44be3e5a80c Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 17:02:05 +0100
Subject: [PATCH 09/48] Fixed spinning buttons properly

---
 src/components/paneNavigate.vue               | 32 ++++++++-----------
 .../paneSettingsComponents/cameraSettings.vue |  2 +-
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/paneNavigate.vue b/src/components/paneNavigate.vue
index 90c61252..1adb59a0 100644
--- a/src/components/paneNavigate.vue
+++ b/src/components/paneNavigate.vue
@@ -64,26 +64,22 @@
 
     <li class="uk-open">
       <a class="uk-accordion-title" href="#">Autofocus</a>
-      <div class="uk-text-center uk-container" v-if="isAutofocusing">
-        <div class="center-spinner" uk-spinner></div>
-      </div>
-      <div class="uk-accordion-content" v-else>
-
-          <div class="uk-grid-small uk-child-width-1-3" uk-grid>
-
-            <div>
-              <button v-on:click="runFastAutofocus(2000, 300);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fast</button>
-            </div>
-
-            <div>
-              <button v-on:click="runAutofocus([-60,-30,0,30,60]);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Medium</button>
-            </div>
-
-            <div>
-              <button v-on:click="runAutofocus([-20,-10,0,10,20]);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fine</button>
-            </div>
+      <div class="uk-accordion-content">
 
+        <div class="uk-text-center uk-container" v-if="isAutofocusing">
+          <div class="center-spinner" uk-spinner></div>
+        </div>
+        <div class="uk-grid-small uk-child-width-1-3" v-bind:hidden="isAutofocusing" uk-grid>
+          <div>
+            <button v-on:click="runFastAutofocus(2000, 300);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fast</button>
           </div>
+          <div>
+            <button v-on:click="runAutofocus([-60,-30,0,30,60]);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Medium</button>
+          </div>
+          <div>
+            <button v-on:click="runAutofocus([-20,-10,0,10,20]);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fine</button>
+          </div>
+        </div>
 
       </div>
     </li>
diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/paneSettingsComponents/cameraSettings.vue
index 7433babe..86c5ff5e 100644
--- a/src/components/paneSettingsComponents/cameraSettings.vue
+++ b/src/components/paneSettingsComponents/cameraSettings.vue
@@ -27,7 +27,7 @@
     <div class="uk-text-center uk-container" v-if="isCalibrating">
       <div class="center-spinner" uk-spinner></div>
     </div>
-    <div v-else>
+    <div v-bind:hidden="isCalibrating">
       <button type="button" v-on:click="recalibrateConfirm()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
     </div>
 

From 2357223aee44a59ff06c59c3626bf530db7b4a39 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 17:02:23 +0100
Subject: [PATCH 10/48] Added some clarity comments

---
 src/App.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 575122cf..26b8f1d9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,13 @@
 <template>
   <div id="app" v-bind:class="handleTheme">
 
+    <!-- Grid managing whole app -->
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
 
+      <!-- Grid managing the left panel -->
       <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
 
+        <!-- Vertical tab bar -->
         <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
           <tabIcon id="connect" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
           <tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
@@ -12,6 +15,7 @@
           <tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
         </div>
 
+        <!-- Corresponding vertical tab content -->
         <div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
           <div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
             <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
@@ -31,6 +35,7 @@
 
       </div>
 
+      <!-- Tabbed panel for gallery and live views -->
       <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
         <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
           <li><a href="#" uk-switcher-item="preview">Live</a></li>

From c002ceccbdc7353bd5c247e11b6d8a2f15c7ac30 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 17:02:35 +0100
Subject: [PATCH 11/48] Started custom theming through LESS

---
 src/assets/less/theme.less | 384 ++++---------------------------------
 src/components/tabIcon.vue |  11 +-
 2 files changed, 43 insertions(+), 352 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index f9ec1d7b..d13bd7b1 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -9,7 +9,8 @@
 
 // Custom OpenFlexure theming
 @global-primary-background: #C32280;
-@global-button-background: #C32280;
+
+@inverse-primary-muted-color: lighten(@global-primary-background, 15%);
 
 // UIkit
 // ========================================================================
@@ -125,7 +126,6 @@
 @inverse-global-muted-color:                    fade(@global-inverse-color, 60%);
 
 
-
 /* ========================================================================
    Theme
  ========================================================================== */
@@ -138,103 +138,14 @@
 @sidebar-right-left-xl:  60px;
 
 
-/* HTML
- ========================================================================== */
 
-/*
- * Force vertical scrollbar
- * 1. `overflow-x` has to be on the `body` element for Safari to prevent horizontal scrolling on touch
-      This causes a random bug showing a vertical scrollbar in combination with some fonts like `Poppins`
-      This is why `overflow-y` must also be set to `hidden`
- */
-
-html { overflow-y: scroll; }
-
-/* 1 */
-body { overflow: hidden; }
-
-
-/* Documentation Sidebars
- ========================================================================== */
-
-/*
- * Sidebar Left
- */
-
-.tm-sidebar-left {
-    position: fixed;
-    top: @navbar-nav-item-height;
-    bottom: 0;
-    box-sizing: border-box;
-    width: @sidebar-left-width !important;
-    padding: 40px 40px 60px 40px;
-    border-right: 1px @global-border solid;
-    overflow: auto;
-}
-
-/*
- * Sidebar Right
- */
-
-.tm-sidebar-right {
-    position: absolute;
-    top: 0;
-    left: ~'calc(100% + @{sidebar-right-left})';
-    width: @sidebar-right-width;
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width; }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: @breakpoint-large) {
-
-    .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left})'; }
-
-    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width - (@sidebar-right-width + @sidebar-right-left); }
-
-}
-
-/* Large screen and bigger */
-@media (min-width: 1400px) {
-
-    .tm-sidebar-left {
-        width: @sidebar-left-width-xl !important;
-        padding: 45px 45px 60px 45px;
-    }
-
-    .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left-xl})'; }
-
-    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width-xl - (@sidebar-right-width + @sidebar-right-left-xl); }
-
-}
-
-
-/* UIkit modifier
+/* UIkit modifiers
  ========================================================================== */
 
 /*
  * Navbar
  */
 
-.tm-navbar-container:not(.uk-navbar-transparent) {
-    background: linear-gradient(to left, #28a5f5, @global-primary-background);
-}
-
-.tm-navbar-container .uk-navbar-nav > li > a,
-.tm-navbar-container .uk-navbar-item:not(.uk-logo),
-.tm-navbar-container .uk-navbar-toggle {
-    height: 70px;
-    font-size: 13px;
-}
-
-// Color Mode
-.tm-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) {}
-
 // Line Mode
 @navbar-nav-item-line-margin-vertical:          20px;
 @navbar-nav-item-line-margin-horizontal:        @navbar-nav-item-padding-horizontal;
@@ -242,275 +153,48 @@ body { overflow: hidden; }
 @navbar-nav-item-line-background:               currentColor;
 @navbar-nav-item-line-transition-duration:      0.3s;
 
-.tm-navbar-container .uk-navbar-nav > li > a {
-    position: relative;
 
-    &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: @navbar-nav-item-line-margin-horizontal;
-        right: ~'calc(102% - @{navbar-nav-item-line-margin-horizontal})';
-        bottom: @navbar-nav-item-line-margin-vertical;
-        height: @navbar-nav-item-line-height;
-        background-color: @navbar-nav-item-line-background;
-        transition: @navbar-nav-item-line-transition-duration ease-in-out;
-        transition-property: right;
+/*
+ * Links
+ */
+.uk-link:hover, a:hover {
+    color: @global-primary-background;
+}
+
+.hook-inverse() {
+    .uk-link:hover, a:hover {
+        color: @inverse-primary-muted-color;
     }
 }
 
-.tm-navbar-container .uk-navbar-nav > li > a:hover::before { right: @navbar-nav-item-line-margin-horizontal; }
-
 /*
- * Nav
+ * Buttons
  */
-
-.tm-nav > li.uk-active > a { position: relative; }
-
-.tm-nav > li.uk-active > a:before {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: -25px;
-    width: 15px;
-    border-top: 1px solid @global-primary-background;
-}
-
-.tm-nav .uk-nav-header {
-    padding: 8px 0;
-    border-bottom: 1px solid @global-border;
-}
-
-/*
- * Subnav
- */
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .tm-subnav { margin-left: -50px; }
-    .tm-subnav > * { padding-left: 50px; }
-
-}
-
-.tm-subnav > * > :first-child { text-transform: capitalize; }
-
-/*
- * Label (Changelog()
- */
-
-.tm-label-changelog {
-    width: 80px;
-    margin-top: 3px;
-}
-
-/*
- * Button and link
- */
-.uk-link:hover, a:hover {
-    color: @global-button-background;
-}
-
 .uk-button {
     border-radius: 2px;
 }
-
-.tm-button-default,
-.tm-button-primary { border-radius: 500px; }
-
-.tm-button-default {}
-
-.tm-button-large { line-height: 48px; }
-
-.tm-button-primary {}
+/*
+.uk-button-primary {
+    background-color: rgba(180, 180, 180, 0.1);
+    color: @global-primary-background;
+    border: 1px solid @global-primary-background;
+}
+ */
+.uk-button-danger {
+    background-color: transparent;
+    color: #f0506e;
+    border: 1px solid #f0506e;
+}
 
 .hook-inverse() {
-
-    .tm-button-default {
-        color: @inverse-global-color;
-        border-color: @inverse-global-muted-color;
+    .uk-button-primary{
+        background-color: rgba(180, 180, 180, 0.1);
+        color: @inverse-primary-muted-color;
+        border-color: @inverse-primary-muted-color;
     }
 
-    .tm-button-primary {
-        background: #fff !important;
-        color: @global-primary-background !important;
+    .uk-button-primary:hover {
+        background-color: @inverse-primary-muted-color;
+        color: #fff;
     }
-
-    .tm-button-primary:hover { box-shadow: 0 10px 40px @global-button-background; }
-
-}
-
-/*
- * Section
- */
-
-.tm-section-primary {
-    background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;
-}
-
-.tm-section-intro {
-    background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat,
-                #fff;
-    background-size: 100% 75%;
-}
-
-/*
- * Heading
- */
-
-.tm-h4,
-.tm-h5,
-.tm-h6 {
-    font-family: Montserrat;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: @global-muted-color;
-}
-
-.tm-h4 { font-size: 14px; }
-.tm-h5 { font-size: 12px; }
-.tm-h6 { font-size: 11px; }
-
-.hook-inverse() {
-
-    .tm-h4,
-    .tm-h5,
-    .tm-h6 { color: rgba(255, 255, 255, 0.7); }
-
-}
-
-/*
- * Text
- */
-
-.tm-text-large { font-size: 18px; }
-
-/*
- * Box shadow
- */
-
-.tm-box-shadow-medium {
-    box-shadow: 2px 12px 35px rgba(0,0,0,0.1),
-                0 1px 6px rgba(0,0,0,0.05);
-}
-
-.tm-box-shadow-large {
-    box-shadow: -40px 40px 160px 0 rgba(0,0,0,0.08),
-                -8px 8px 15px 0 rgba(120,120,120,0.04),
-                3px 3px 30px 0 rgba(0,0,0,0.04);
-}
-
-.tm-box-shadow-modal { box-shadow: 3px 3px 40px 0 rgba(0,0,0,0.06); }
-
-/*
- * Overlay
- */
-
-.tm-overlay-default { background: fade(@global-background, 50%); }
-
-/*
- * Modal
- */
-
-.tm-modal-dialog { background: @global-muted-background; }
-
-.tm-modal-header { padding: 20px 30px; }
-.tm-modal-body { padding: 0; }
-
-/* Phone landscape and bigger */
-@media (min-width: @breakpoint-small) {
-
-    .tm-modal-header { padding: 25px 50px; }
-    .tm-modal-body { padding: 0 50px; }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: @breakpoint-xlarge) {
-
-    .tm-modal-header { padding: 50px 120px; }
-    .tm-modal-body { padding: 0 120px; }
-
-}
-
-.tm-modal-close-full {
-    background: transparent;
-    padding: 30px;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: @breakpoint-small) {
-
-    .tm-modal-close-full { padding: @global-medium-margin; }
-
-}
-
-/* Utilities
- ========================================================================== */
-
-/*
- * Heading fragment
- */
-
-.tm-heading-fragment > a {
-    color: inherit;
-    text-decoration: none;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: @breakpoint-small) {
-
-    h2.tm-heading-fragment > a:before {
-        content: "#";
-        position: absolute;
-        width: 25px;
-        margin-left: -25px;
-        color: @global-muted-color;
-    }
-
-}
-
-
-/* Reset container for docs
- ========================================================================== */
-
-.tm-main .uk-container {
-    padding-left: @container-padding-horizontal;
-    padding-right: @container-padding-horizontal;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: @breakpoint-small) {
-
-    .tm-main .uk-container {
-        padding-left: @container-padding-horizontal-s;
-        padding-right: @container-padding-horizontal-s;
-    }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .tm-main .uk-container {
-        padding-left: @container-padding-horizontal-m;
-        padding-right: @container-padding-horizontal-m;
-    }
-
-}
-
-
-/* Pro
- ========================================================================== */
-
-/* Desktop and bigger */
-@media (min-width: @breakpoint-large) {
-    .tm-intro-text { margin-top: 30px; }
-}
-
-/* Large screen and bigger */
-@media (min-width: @breakpoint-xlarge) {
-    .tm-intro-text { margin-top: 90px; }
-    .tm-intro-image { margin-right: -75px; }
-}
+}
\ No newline at end of file
diff --git a/src/components/tabIcon.vue b/src/components/tabIcon.vue
index bbead888..2d892a16 100644
--- a/src/components/tabIcon.vue
+++ b/src/components/tabIcon.vue
@@ -28,7 +28,7 @@ export default {
 
   computed: {
     tooltipOptions: function () {
-      return `pos: right; title: ${this.name}`
+      return `pos: right; title: ${this.name}; delay: 500`
     },
 
     classObject: function () {
@@ -48,6 +48,13 @@ export default {
 @import "../assets/less/theme.less";
 
 .tabicon-active {
-  color: @global-button-background !important;
+  color: @global-primary-background !important;
 }
+
+.hook-inverse() {
+    .tabicon-active {
+        color: @inverse-primary-muted-color !important;
+    }
+}
+
 </style>
\ No newline at end of file

From 2327b9b8bf832f2ab1018e98507c4d3faac420ed Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Mon, 10 Jun 2019 19:26:19 +0100
Subject: [PATCH 12/48] Tidied up component structure

---
 src/App.vue                                   | 165 +-------------
 src/assets/less/theme.less                    |   2 +-
 .../{ => controlComponents}/paneCapture.vue   |   0
 .../{ => controlComponents}/paneConnect.vue   |  23 +-
 .../{ => controlComponents}/paneNavigate.vue  |   0
 .../{ => controlComponents}/panePlugins.vue   |   0
 .../{ => controlComponents}/paneSettings.vue  |   9 +-
 .../settingsComponents}/appSettings.vue       |   0
 .../settingsComponents}/cameraSettings.vue    |   0
 .../microscopeSettings.vue                    |   0
 .../settingsComponents}/streamSettings.vue    |   0
 .../{ => genericComponents}/tabContent.vue    |  16 +-
 .../{ => genericComponents}/tabIcon.vue       |   8 +-
 .../paneDisplayComponents/streamDisplay.vue   | 203 ------------------
 src/components/panelLeft.vue                  | 111 ++++++++++
 src/components/panelRight.vue                 |  66 ++++++
 .../galleryComponents/captureCard.vue         |   0
 .../galleryComponents/scanCard.vue            |   0
 .../galleryDisplay.vue                        |   0
 19 files changed, 224 insertions(+), 379 deletions(-)
 rename src/components/{ => controlComponents}/paneCapture.vue (100%)
 rename src/components/{ => controlComponents}/paneConnect.vue (95%)
 rename src/components/{ => controlComponents}/paneNavigate.vue (100%)
 rename src/components/{ => controlComponents}/panePlugins.vue (100%)
 rename src/components/{ => controlComponents}/paneSettings.vue (73%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/appSettings.vue (100%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/cameraSettings.vue (100%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/microscopeSettings.vue (100%)
 rename src/components/{paneSettingsComponents => controlComponents/settingsComponents}/streamSettings.vue (100%)
 rename src/components/{ => genericComponents}/tabContent.vue (58%)
 rename src/components/{ => genericComponents}/tabIcon.vue (81%)
 delete mode 100644 src/components/paneDisplayComponents/streamDisplay.vue
 create mode 100644 src/components/panelLeft.vue
 create mode 100644 src/components/panelRight.vue
 rename src/components/{paneDisplayComponents => viewComponents}/galleryComponents/captureCard.vue (100%)
 rename src/components/{paneDisplayComponents => viewComponents}/galleryComponents/scanCard.vue (100%)
 rename src/components/{paneDisplayComponents => viewComponents}/galleryDisplay.vue (100%)

diff --git a/src/App.vue b/src/App.vue
index 26b8f1d9..6a7a658b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,50 +3,8 @@
 
     <!-- Grid managing whole app -->
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
-
-      <!-- Grid managing the left panel -->
-      <div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
-
-        <!-- Vertical tab bar -->
-        <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
-          <tabIcon id="connect" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-          <tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-          <tabIcon id="capture" name="Capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-          <tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-        </div>
-
-        <!-- Corresponding vertical tab content -->
-        <div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-          <div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
-            <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
-              <paneConnect/>
-            </tabContent>
-            <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
-              <paneNavigate/>
-            </tabContent>
-            <tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
-              <paneCapture/>
-            </tabContent>
-            <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
-              <paneSettings/>
-            </tabContent>
-          </div>
-        </div>
-
-      </div>
-
-      <!-- Tabbed panel for gallery and live views -->
-      <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
-        <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
-          <li><a href="#" uk-switcher-item="preview">Live</a></li>
-          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
-        </ul>
-        <ul class="uk-switcher uk-flex uk-flex-1">
-          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
-        </ul>
-      </div>
-
+      <panelLeft/>
+      <panelRight/>
     </div>
 
   </div>
@@ -55,105 +13,29 @@
 <script>
 // Import axios for HTTP requests
 import axios from 'axios'
-// Import basic UIkit
-import UIkit from 'uikit';
 
 // Import components
-import tabIcon from './components/tabIcon.vue'
-import tabContent from './components/tabContent.vue'
-
-// Import components
-import paneConnect from './components/paneConnect.vue'
-import paneNavigate from './components/paneNavigate.vue'
-import paneCapture from './components/paneCapture.vue'
-import panePlugins from './components/panePlugins.vue'
-import paneSettings from './components/paneSettings.vue'
-// Import components
-import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
-import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
+import panelLeft from './components/panelLeft.vue'
+import panelRight from './components/panelRight.vue'
 
 // Export main app
 export default {
   name: 'app',
 
   components: {
-    tabIcon,
-    tabContent,
-    streamDisplay,
-    galleryDisplay,
-    paneConnect,
-    paneNavigate,
-    paneCapture,
-    panePlugins,
-    paneSettings
+    panelRight,
+    panelLeft
   },
 
   data: function () {
-    return {
-      currentTab: 'connect',
-      showControlBar: true,
-      window: {
-        width: 0,
-        height: 0
-      }
-    }  
+    return {}  
   },
 
   created: function () {
-    var context = this
-
-    window.addEventListener('resize', this.handleResize)
-    this.handleResize();
-
     window.addEventListener('beforeunload', this.handleExit)
   },
 
-  mounted() {
-    // Attach methods to UIkit events for tab switching
-    var context = this;
-    // Gallery tab
-    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
-      console.log("Gallery tab entered")
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', false)
-      }
-      context.$root.$emit('globalUpdateCaptureList');
-    });
-
-    // Stream tab
-    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
-      console.log("Stream tab entered")
-      UIkit.update()
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', true)
-      }
-    });
-
-  },
-
-  beforeDestroy: function () {
-    window.removeEventListener('resize', this.handleResize)
-  },
-
   methods: {
-    setTab: function(event, tab) {
-      console.log(event)
-      console.log(tab)
-      if (this.currentTab == tab) {
-        this.showControlBar = !this.showControlBar
-        this.currentTab = 'none'
-      }
-      else {
-        this.showControlBar = true
-        this.currentTab = tab
-      }
-    },
-
-    handleResize: function(event) {
-      this.window.width = window.innerWidth;
-      this.window.height = window.innerHeight;
-    },
-
     handleExit: function(event) {
       console.log("Triggered beforeunload")
       this.$root.$emit('globalTogglePreview', false)
@@ -166,14 +48,6 @@ export default {
         'uk-light': this.$store.state.globalSettings.darkMode,
         'uk-background-secondary': this.$store.state.globalSettings.darkMode
       }
-    },
-    disableIfDisconnected: function () {
-      return {
-        'uk-disabled': !this.$store.getters.ready
-      }
-    },
-    onMobile: function () {
-      return (this.window.width <= 800) ? true : false 
     }
   }
 
@@ -204,29 +78,4 @@ body, html {
   opacity: 0.4;
 }
 
-.uk-tab {
-  padding-left: 0;
-}
-#component-left {
-  width: 300px;
-}
-
-#container-left {
-  overflow: hidden auto;
-}
-
-#container-left, #switcher-left {
-  border-width: 0 1px 0 0;
-  border-style: solid;
-  border-color: rgba(180, 180, 180, 0.25)
-}
-
-#switcher-left a{
-  padding: 12px 20px;
-}
-
-#switcher-left{
-  background-color: rgba(180, 180, 180, 0.1);
-}
-
 </style>
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index d13bd7b1..bc48ab18 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -188,7 +188,7 @@
 
 .hook-inverse() {
     .uk-button-primary{
-        background-color: rgba(180, 180, 180, 0.1);
+        background-color: rgba(180, 180, 180, 0.15);
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
diff --git a/src/components/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
similarity index 100%
rename from src/components/paneCapture.vue
rename to src/components/controlComponents/paneCapture.vue
diff --git a/src/components/paneConnect.vue b/src/components/controlComponents/paneConnect.vue
similarity index 95%
rename from src/components/paneConnect.vue
rename to src/components/controlComponents/paneConnect.vue
index 41de7f1c..ffcb8824 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/controlComponents/paneConnect.vue
@@ -2,8 +2,6 @@
 <div class="host-input">
   <div class="uk-margin">
 
-    <h4>Connect</h4>
-
     <form @submit.prevent="handleSubmit">
       <div class="uk-form-controls uk-margin">
         <label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
@@ -23,10 +21,11 @@
           <div class="uk-accordion-content">
             <label class="uk-form-label" for="form-stacked-text">Port</label>
             <div class="uk-form-controls">
-              <input v-model="computedPort" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
+              <input v-model="computedPort" class="uk-input uk-form-small" id="form-stacked-text" type="number" value=5000>
             </div>
           </div>
         </li>
+
         <li>
           <a class="uk-accordion-title" href="#">Status</a>
           <div class="uk-accordion-content">
@@ -35,23 +34,23 @@
               <p><b>Base URI:</b> {{ $store.getters.uri }}</p>
               <p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
             </div>
-
             <div v-else-if="$store.state.waiting"><div uk-spinner></div></div>
             <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
             <div v-else>No active connection</div>
           </div>
         </li>
+
         <li v-if="!localMode" class="uk-open">
           <a class="uk-accordion-title" href="#">Saved hosts</a>
           <div class="uk-accordion-content">
             <button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
-
             <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
-              <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto" uk-icon="trash"></a> 
+              <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
+              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto host-delete" uk-icon="trash"></a> 
             </div>
           </div>
         </li>
+
       </ul>
 
       <button class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">Connect</button>
@@ -246,4 +245,14 @@ export default {
 .host-input {
   text-align: left;
 }
+
+.host-description {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.host-delete {
+  padding: 0 2px 0 10px;
+}
+
 </style>
diff --git a/src/components/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
similarity index 100%
rename from src/components/paneNavigate.vue
rename to src/components/controlComponents/paneNavigate.vue
diff --git a/src/components/panePlugins.vue b/src/components/controlComponents/panePlugins.vue
similarity index 100%
rename from src/components/panePlugins.vue
rename to src/components/controlComponents/panePlugins.vue
diff --git a/src/components/paneSettings.vue b/src/components/controlComponents/paneSettings.vue
similarity index 73%
rename from src/components/paneSettings.vue
rename to src/components/controlComponents/paneSettings.vue
index c0c6e9ce..f24b80cb 100644
--- a/src/components/paneSettings.vue
+++ b/src/components/controlComponents/paneSettings.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="paneSettings">
     
-    <h3>Settings</h3>
     <appSettings/>
 
     <ul uk-accordion="multiple: true">
@@ -26,10 +25,10 @@
 </template>
 
 <script>
-import streamSettings from './paneSettingsComponents/streamSettings.vue'
-import microscopeSettings from './paneSettingsComponents/microscopeSettings.vue'
-import cameraSettings from './paneSettingsComponents/cameraSettings.vue'
-import appSettings from './paneSettingsComponents/appSettings.vue'
+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 {
diff --git a/src/components/paneSettingsComponents/appSettings.vue b/src/components/controlComponents/settingsComponents/appSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/appSettings.vue
rename to src/components/controlComponents/settingsComponents/appSettings.vue
diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/controlComponents/settingsComponents/cameraSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/cameraSettings.vue
rename to src/components/controlComponents/settingsComponents/cameraSettings.vue
diff --git a/src/components/paneSettingsComponents/microscopeSettings.vue b/src/components/controlComponents/settingsComponents/microscopeSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/microscopeSettings.vue
rename to src/components/controlComponents/settingsComponents/microscopeSettings.vue
diff --git a/src/components/paneSettingsComponents/streamSettings.vue b/src/components/controlComponents/settingsComponents/streamSettings.vue
similarity index 100%
rename from src/components/paneSettingsComponents/streamSettings.vue
rename to src/components/controlComponents/settingsComponents/streamSettings.vue
diff --git a/src/components/tabContent.vue b/src/components/genericComponents/tabContent.vue
similarity index 58%
rename from src/components/tabContent.vue
rename to src/components/genericComponents/tabContent.vue
index 2a62409e..77c0d575 100644
--- a/src/components/tabContent.vue
+++ b/src/components/genericComponents/tabContent.vue
@@ -5,7 +5,9 @@
     v-bind:hidden="currentTab!=id" 
     class="uk-width-expand"
   >
-    <slot></slot>
+    <div class="section-heading">{{ id }}</div>
+    <div class="section-content"><slot></slot></div>
+    
   </div>
 
 </template>
@@ -28,4 +30,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
+.section-heading {
+  display: block;
+  font-size: 12px;
+  text-transform: uppercase;
+  line-height: 20px;
+}
+
+.section-content, .section-heading {
+  padding: 9px 10px;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/tabIcon.vue b/src/components/genericComponents/tabIcon.vue
similarity index 81%
rename from src/components/tabIcon.vue
rename to src/components/genericComponents/tabIcon.vue
index 2d892a16..40e28478 100644
--- a/src/components/tabIcon.vue
+++ b/src/components/genericComponents/tabIcon.vue
@@ -16,8 +16,7 @@ export default {
   props: {
     id: String,
     currentTab: String,
-    requireConnection: Boolean,
-    name: String
+    requireConnection: Boolean
   },
 
   methods: {
@@ -28,7 +27,8 @@ export default {
 
   computed: {
     tooltipOptions: function () {
-      return `pos: right; title: ${this.name}; delay: 500`
+      var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
+      return `pos: right; title: ${title}; delay: 500`
     },
 
     classObject: function () {
@@ -45,7 +45,7 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../assets/less/theme.less";
+@import "../../assets/less/theme.less";
 
 .tabicon-active {
   color: @global-primary-background !important;
diff --git a/src/components/paneDisplayComponents/streamDisplay.vue b/src/components/paneDisplayComponents/streamDisplay.vue
deleted file mode 100644
index 8ccbb654..00000000
--- a/src/components/paneDisplayComponents/streamDisplay.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-	<div class="streamDisplay uk-width-1-1 uk-height-1-1 scrollTarget" id="streamDisplay" ref="streamDisplay">
-
-		<img class="uk-align-center uk-margin-remove-bottom" v-on:dblclick="clickmonitor" v-if="showStream" v-bind:src="streamImgUri" alt="Stream">
-
-		<div v-else-if="$store.state.waiting" class="uk-position-center">
-			<div uk-spinner="ratio: 4.5" ></div>
-		</div>
-
-		<div v-else-if="$store.state.globalSettings.disableStream" class="uk-position-center position-relative text-center">
-			Stream preview disabled
-		</div>
-
-		<div v-else class="uk-position-center position-relative text-center">
-			No active connection
-		</div>
-
-	</div>
-</template>
-
-<script>
-import axios from 'axios'
-
-// Export main app
-export default {
-  name: 'streamDisplay',
-
-  data: function () {
-    return {
-			displaySize: [0, 0],
-			displayPosition: [0, 0],
-			GpuPreviewActive: false,
-      resizeTeimoutId: setTimeout(this.doneResizing, 500)
-    }
-  },
-
-  mounted() {
-		// A global signal listener to change the GPU preview state
-    this.$root.$on('globalResizePreview', (state) => {
-			this.handleDoneResize()
-		})
-    // A global signal listener to change the GPU preview state
-    this.$root.$on('globalTogglePreview', (state) => {
-			console.log(`Toggling preview to ${state}`)
-			this.previewRequest(state)
-		})
-	},
-
-	created: function () {
-		// Add resize listener
-		window.addEventListener('resize', this.handleResize);
-		
-		// Watch for host 'ready'
-		this.$store.watch(
-			(state)=>{
-				return this.$store.getters.ready
-			},
-			(newValue, oldValue)=>{
-				// 'ready' changed, so do something
-				console.log(oldValue)
-				console.log(newValue)
-				this.previewRequest(this.$store.state.globalSettings.autoGpuPreview)
-			}
-		)
-	},
-
-	beforeDestroy: function () {
-		// Remove resize listener
-		window.removeEventListener('resize', this.handleResize)
-	},
-
-  methods: {
-    clickmonitor: function(event) {
-			// Calculate steps from event coordinates and store config FOV
-			var xCoordinate = event.offsetX;
-			var yCoordinate = event.offsetY;
-
-			var xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
-			var yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
-
-			var xSteps = xRelative * this.$store.state.apiConfig.fov[0];
-			var ySteps = yRelative * this.$store.state.apiConfig.fov[1];
-
-			// Emit a signal to move, acted on by panelNavigate.vue
-			this.$root.$emit('globalMoveEvent', xSteps, ySteps, 0, false)
-		},
-		
-		handleResize: function(event) {
-			// Only fires resize event after no resize in 500ms (prevents resize event spam)
-			clearTimeout(this.resizeTeimoutId);
-			this.resizeTeimoutId = setTimeout(this.handleDoneResize, 500)
-		},
-
-		handleDoneResize: function() {
-			// Recalculate size
-			this.recalculateSize();
-			if (this.$store.state.globalSettings.autoGpuPreview == true && this.GpuPreviewActive == true) {
-				// Reload preview
-				this.$root.$emit('globalTogglePreview', true)
-			}
-		},
-
-		recalculateSize: function () {
-			console.log("Recalculating window dimensions...")
-			// Stacking parentNode is a hacky fix
-			// For some reason, when switching tabs, width was always half what it should be,
-			// until the size was recalculated at some later time. Probably something to do
-			// with tab transition. This parentNode stuff instead reads the size of the tab
-			// container, irrespective of WHICH tab is selected. It's nasty, but works.
-			let element = this.$refs.streamDisplay.parentNode.parentNode;
-
-			let size = [element.clientWidth, element.clientHeight];
-
-			let elem_pos = [element.getBoundingClientRect().left, element.getBoundingClientRect().top];
-			let wind_pos = [window.screenX, window.screenY];
-			let navHeight = window.outerHeight - window.innerHeight;
-			let position = [Math.max(0, wind_pos[0] + elem_pos[0]), Math.max(0, wind_pos[1] + elem_pos[1] + navHeight)];
-
-			this.displaySize = size;
-			this.displayPosition = position;
-		},
-
-    previewRequest: function(state) {
-			if (this.$store.getters.ready == true) {
-				// Create URI and set this.GpuPreviewActive depending on if starting or stopping preview
-				if (state == true) {
-					this.GpuPreviewActive = true
-					var requestUri = this.startPreviewUri;
-				}
-				else {
-					this.GpuPreviewActive = false;
-					var requestUri = this.stopPreviewUri;
-				}
-
-				// Generate payload if tracking window position
-				if (this.$store.state.globalSettings.trackWindow == true && state == true) {
-					// Recalculate frame dimensions and position
-					this.recalculateSize()
-					// Copy data into payload array
-					var payload = {
-						window : [
-							this.displayPosition[0],
-							this.displayPosition[1],
-							this.displaySize[0],
-							this.displaySize[1],
-						]
-					}
-				}
-				else {
-					var letpayload = {}
-				}
-
-				// Send preview request
-				axios.post(requestUri, payload)
-				.then(response => { 
-					this.$store.dispatch('updateState');  // Update store state
-				})
-				.catch(error => {
-					this.modalError(error) // Let mixin handle error
-				})
-			}
-    },
-
-  },
-
-  computed: {
-		showStream: function () {
-			return this.$store.getters.ready && !this.$store.state.globalSettings.disableStream
-		},
-    streamImgUri: function () {
-      return this.$store.getters.uri + "/stream"
-		},
-		startPreviewUri: function () {
-			return this.$store.getters.uri + "/camera/preview/start"
-		},
-		stopPreviewUri: function () {
-			return this.$store.getters.uri + "/camera/preview/stop"
-		}
-	}
-
-}
-</script>
-
-<style scoped lang="less">
-.streamDisplay img {
-	height: 100%;
-	text-align: center;
-	object-fit: contain
-}
-
-.streamDisplay {
-	width: 100%;
-	height: 100%;
-}
-
-.position-relative {
-	position: relative !important;
-}
-
-.text-center {
-	text-align: center;
-}
-</style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
new file mode 100644
index 00000000..9336cddd
--- /dev/null
+++ b/src/components/panelLeft.vue
@@ -0,0 +1,111 @@
+<template>
+  <div id="panel-left" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
+
+    <!-- Vertical tab bar -->
+    <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
+      <tabIcon id="connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+    </div>
+
+    <!-- Corresponding vertical tab content -->
+    <div v-bind:hidden="!showControlBar" 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" :requireConnection="false" :currentTab="currentTab">
+          <paneConnect/>
+        </tabContent>
+        <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
+          <paneNavigate/>
+        </tabContent>
+        <tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
+          <paneCapture/>
+        </tabContent>
+        <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
+          <paneSettings/>
+        </tabContent>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+// Import axios for HTTP requests
+import axios from 'axios'
+
+// Import generic components
+import tabIcon from './genericComponents/tabIcon.vue'
+import tabContent from './genericComponents/tabContent.vue'
+
+// Import pane components
+import paneConnect from './controlComponents/paneConnect.vue'
+import paneNavigate from './controlComponents/paneNavigate.vue'
+import paneCapture from './controlComponents/paneCapture.vue'
+import paneSettings from './controlComponents/paneSettings.vue'
+
+// Export main app
+export default {
+  name: 'panelLeft',
+
+  components: {
+    tabIcon,
+    tabContent,
+    paneConnect,
+    paneNavigate,
+    paneCapture,
+    paneSettings
+  },
+
+  data: function () {
+    return {
+      currentTab: 'connect',
+      showControlBar: true,
+    }  
+  },
+
+  methods: {
+    setTab: function(event, tab) {
+      if (this.currentTab == tab) {
+        this.showControlBar = !this.showControlBar
+        this.currentTab = 'none'
+      }
+      else {
+        this.showControlBar = true
+        this.currentTab = tab
+      }
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+
+#component-left {
+  width: 300px;
+}
+
+#container-left {
+  overflow: hidden auto;
+  background-color: rgba(180, 180, 180, 0.025);
+}
+
+#container-left, #switcher-left {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25)
+}
+
+#switcher-left a{
+  padding: 12px 20px;
+}
+
+#switcher-left{
+  background-color: rgba(180, 180, 180, 0.1);
+  padding-top: 2px !important;
+}
+
+</style>
diff --git a/src/components/panelRight.vue b/src/components/panelRight.vue
new file mode 100644
index 00000000..f3db8871
--- /dev/null
+++ b/src/components/panelRight.vue
@@ -0,0 +1,66 @@
+<template>
+  <!-- Tabbed panel for gallery and live views -->
+  <div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
+    <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
+        <li><a href="#" uk-switcher-item="preview">Live</a></li>
+        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
+    </ul>
+    <ul class="uk-switcher uk-flex uk-flex-1">
+        <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+        <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+// Import axios for HTTP requests
+import axios from 'axios'
+// Import basic UIkit
+import UIkit from 'uikit';
+
+// Import components
+import streamDisplay from './viewComponents/streamDisplay.vue'
+import galleryDisplay from './viewComponents/galleryDisplay.vue'
+
+// Export main app
+export default {
+  name: 'panelRight',
+
+  components: {
+    streamDisplay,
+    galleryDisplay,
+  },
+
+  mounted() {
+    // Attach methods to UIkit events for tab switching
+    var context = this;
+    // Gallery tab
+    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
+      console.log("Gallery tab entered")
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', false)
+      }
+      context.$root.$emit('globalUpdateCaptureList');
+    });
+
+    // Stream tab
+    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
+      console.log("Stream tab entered")
+      UIkit.update()
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', true)
+      }
+    });
+
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+
+.uk-tab {
+  padding-left: 0;
+}
+
+</style>
diff --git a/src/components/paneDisplayComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
similarity index 100%
rename from src/components/paneDisplayComponents/galleryComponents/captureCard.vue
rename to src/components/viewComponents/galleryComponents/captureCard.vue
diff --git a/src/components/paneDisplayComponents/galleryComponents/scanCard.vue b/src/components/viewComponents/galleryComponents/scanCard.vue
similarity index 100%
rename from src/components/paneDisplayComponents/galleryComponents/scanCard.vue
rename to src/components/viewComponents/galleryComponents/scanCard.vue
diff --git a/src/components/paneDisplayComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
similarity index 100%
rename from src/components/paneDisplayComponents/galleryDisplay.vue
rename to src/components/viewComponents/galleryDisplay.vue

From b9651298fc9f5feee59382356f793731b843ea82 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Mon, 10 Jun 2019 19:26:40 +0100
Subject: [PATCH 13/48] Moved to a single ResizeObserver to manage element
 resizing

---
 .../viewComponents/streamDisplay.vue          | 215 ++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 src/components/viewComponents/streamDisplay.vue

diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
new file mode 100644
index 00000000..562ffca4
--- /dev/null
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -0,0 +1,215 @@
+<template>
+	<div ref="streamDisplay" class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget" id="stream-display">
+
+		<img class="uk-align-center uk-margin-remove-bottom" v-on:dblclick="clickmonitor" v-if="showStream" v-bind:src="streamImgUri" alt="Stream">
+
+		<div v-else-if="$store.state.waiting" class="uk-position-center">
+			<div uk-spinner="ratio: 4.5" ></div>
+		</div>
+
+		<div v-else-if="$store.state.globalSettings.disableStream" class="uk-position-center position-relative text-center">
+			Stream preview disabled
+		</div>
+
+		<div v-else class="uk-position-center position-relative text-center">
+			No active connection
+		</div>
+
+	</div>
+</template>
+
+<script>
+import axios from 'axios'
+
+// Export main app
+export default {
+  name: 'stream-display',
+
+  data: function () {
+    return {
+			displaySize: [0, 0],
+			displayPosition: [0, 0],
+			GpuPreviewActive: false,
+			resizeTeimoutId: setTimeout(this.doneResizing, 500)
+    }
+  },
+
+  mounted() {
+
+		const context = this;
+
+    // A global signal listener to change the GPU preview state
+    this.$root.$on('globalTogglePreview', (state) => {
+			console.log(`Toggling preview to ${state}`)
+			this.previewRequest(state)
+		})
+
+		// Mutation observer
+		this.sizeObserver = new ResizeObserver(entries => {
+			context.handleResize()  // For any element attached to the observer, run handleResize() on change
+			entries.forEach(entry => {})  // Optional: Run something per entry
+		});
+
+		// Fetch streamDisplay by ref
+		const streamDisplayElement = this.$refs.streamDisplay.parentNode;
+		// Attach streamDisplay to the size observer
+		this.sizeObserver.observe(streamDisplayElement);
+
+	},
+
+	created: function () {
+
+		// Watch for host 'ready'
+		this.$store.watch(
+			(state)=>{
+				return this.$store.getters.ready
+			},
+			(newValue, oldValue)=>{
+				// 'ready' changed, so do something
+				this.previewRequest(this.$store.state.globalSettings.autoGpuPreview)
+			}
+		)
+	},
+
+	beforeDestroy: function () {
+		// Disconnect the size observer
+		this.sizeObserver.disconnect()
+	},
+
+  methods: {
+    clickmonitor: function(event) {
+			// Calculate steps from event coordinates and store config FOV
+			var xCoordinate = event.offsetX;
+			var yCoordinate = event.offsetY;
+
+			var xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
+			var yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
+
+			var xSteps = xRelative * this.$store.state.apiConfig.fov[0];
+			var ySteps = yRelative * this.$store.state.apiConfig.fov[1];
+
+			// Emit a signal to move, acted on by panelNavigate.vue
+			this.$root.$emit('globalMoveEvent', xSteps, ySteps, 0, false)
+		},
+		
+		handleResize: function(event) {
+			// Only fires resize event after no resize in 500ms (prevents resize event spam)
+			clearTimeout(this.resizeTeimoutId);
+			this.resizeTeimoutId = setTimeout(this.handleDoneResize, 500)
+		},
+
+		handleDoneResize: function() {
+			// Recalculate size
+			console.log("Recalculating frame size")
+			this.recalculateSize();
+			if (this.$store.state.globalSettings.autoGpuPreview == true && this.GpuPreviewActive == true) {
+				// Reload preview
+				this.$root.$emit('globalTogglePreview', true)
+			}
+		},
+
+		recalculateSize: function () {
+			console.log("Recalculating window dimensions...")
+			// Stacking parentNode is a hacky fix
+			// For some reason, when switching tabs, width was always half what it should be,
+			// until the size was recalculated at some later time. Probably something to do
+			// with tab transition. This parentNode stuff instead reads the size of the tab
+			// container, irrespective of WHICH tab is selected. It's nasty, but works.
+			console.log("ELEMENT:")
+			console.log(this.$refs.streamDisplay)
+			let element = this.$refs.streamDisplay.parentNode.parentNode;
+
+			let size = [element.clientWidth, element.clientHeight];
+
+			let elem_pos = [element.getBoundingClientRect().left, element.getBoundingClientRect().top];
+			let wind_pos = [window.screenX, window.screenY];
+			let navHeight = window.outerHeight - window.innerHeight;
+			let position = [Math.max(0, wind_pos[0] + elem_pos[0]), Math.max(0, wind_pos[1] + elem_pos[1] + navHeight)];
+
+			this.displaySize = size;
+			console.log(`Size: ${this.displaySize}`)
+			this.displayPosition = position;
+			console.log(`Position: ${this.displayPosition}`)
+		},
+
+    previewRequest: function(state) {
+			if (this.$store.getters.ready == true) {
+				// Create URI and set this.GpuPreviewActive depending on if starting or stopping preview
+				if (state == true) {
+					this.GpuPreviewActive = true
+					var requestUri = this.startPreviewUri;
+				}
+				else {
+					this.GpuPreviewActive = false;
+					var requestUri = this.stopPreviewUri;
+				}
+
+				// Generate payload if tracking window position
+				if (this.$store.state.globalSettings.trackWindow == true && state == true) {
+					// Recalculate frame dimensions and position
+					this.recalculateSize()
+					// Copy data into payload array
+					var payload = {
+						window : [
+							this.displayPosition[0],
+							this.displayPosition[1],
+							this.displaySize[0],
+							this.displaySize[1],
+						]
+					}
+				}
+				else {
+					var letpayload = {}
+				}
+
+				// Send preview request
+				axios.post(requestUri, payload)
+				.then(response => { 
+					this.$store.dispatch('updateState');  // Update store state
+				})
+				.catch(error => {
+					this.modalError(error) // Let mixin handle error
+				})
+			}
+    },
+
+  },
+
+  computed: {
+		showStream: function () {
+			return this.$store.getters.ready && !this.$store.state.globalSettings.disableStream
+		},
+    streamImgUri: function () {
+      return this.$store.getters.uri + "/stream"
+		},
+		startPreviewUri: function () {
+			return this.$store.getters.uri + "/camera/preview/start"
+		},
+		stopPreviewUri: function () {
+			return this.$store.getters.uri + "/camera/preview/stop"
+		}
+	}
+
+}
+</script>
+
+<style scoped lang="less">
+.stream-display img {
+	height: 100%;
+	text-align: center;
+	object-fit: contain
+}
+
+.stream-display {
+	width: 100%;
+	height: 100%;
+}
+
+.position-relative {
+	position: relative !important;
+}
+
+.text-center {
+	text-align: center;
+}
+</style>

From e0d316938553f068b67172804163950c1814629c Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 21:38:08 +0100
Subject: [PATCH 14/48] Fixed typo

---
 src/components/viewComponents/streamDisplay.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
index 562ffca4..9e91906d 100644
--- a/src/components/viewComponents/streamDisplay.vue
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -30,7 +30,7 @@ export default {
 			displaySize: [0, 0],
 			displayPosition: [0, 0],
 			GpuPreviewActive: false,
-			resizeTeimoutId: setTimeout(this.doneResizing, 500)
+			resizeTimeoutId: setTimeout(this.doneResizing, 500)
     }
   },
 
@@ -94,8 +94,8 @@ export default {
 		
 		handleResize: function(event) {
 			// Only fires resize event after no resize in 500ms (prevents resize event spam)
-			clearTimeout(this.resizeTeimoutId);
-			this.resizeTeimoutId = setTimeout(this.handleDoneResize, 500)
+			clearTimeout(this.resizeTimeoutId);
+			this.resizeTimeoutId = setTimeout(this.handleDoneResize, 500)
 		},
 
 		handleDoneResize: function() {

From a343d170532d9984286dd18c0986fce7911a302e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 10 Jun 2019 21:51:05 +0100
Subject: [PATCH 15/48] Tidied up streamDisplay a bit

---
 src/components/viewComponents/streamDisplay.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
index 9e91906d..040a481a 100644
--- a/src/components/viewComponents/streamDisplay.vue
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -35,9 +35,6 @@ export default {
   },
 
   mounted() {
-
-		const context = this;
-
     // A global signal listener to change the GPU preview state
     this.$root.$on('globalTogglePreview', (state) => {
 			console.log(`Toggling preview to ${state}`)
@@ -46,7 +43,7 @@ export default {
 
 		// Mutation observer
 		this.sizeObserver = new ResizeObserver(entries => {
-			context.handleResize()  // For any element attached to the observer, run handleResize() on change
+			this.handleResize()  // For any element attached to the observer, run handleResize() on change
 			entries.forEach(entry => {})  // Optional: Run something per entry
 		});
 
@@ -110,15 +107,8 @@ export default {
 
 		recalculateSize: function () {
 			console.log("Recalculating window dimensions...")
-			// Stacking parentNode is a hacky fix
-			// For some reason, when switching tabs, width was always half what it should be,
-			// until the size was recalculated at some later time. Probably something to do
-			// with tab transition. This parentNode stuff instead reads the size of the tab
-			// container, irrespective of WHICH tab is selected. It's nasty, but works.
-			console.log("ELEMENT:")
-			console.log(this.$refs.streamDisplay)
-			let element = this.$refs.streamDisplay.parentNode.parentNode;
 
+			let element = this.$refs.streamDisplay.parentNode;
 			let size = [element.clientWidth, element.clientHeight];
 
 			let elem_pos = [element.getBoundingClientRect().left, element.getBoundingClientRect().top];

From 5a9857d2154a9f4205ea7929ac1f5c41ac23904f Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Tue, 11 Jun 2019 09:37:47 +0100
Subject: [PATCH 16/48] Tidied up recalculateSize

---
 .../viewComponents/streamDisplay.vue          | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
index 040a481a..3205ecfa 100644
--- a/src/components/viewComponents/streamDisplay.vue
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -46,7 +46,6 @@ export default {
 			this.handleResize()  // For any element attached to the observer, run handleResize() on change
 			entries.forEach(entry => {})  // Optional: Run something per entry
 		});
-
 		// Fetch streamDisplay by ref
 		const streamDisplayElement = this.$refs.streamDisplay.parentNode;
 		// Attach streamDisplay to the size observer
@@ -55,7 +54,6 @@ export default {
 	},
 
 	created: function () {
-
 		// Watch for host 'ready'
 		this.$store.watch(
 			(state)=>{
@@ -76,14 +74,14 @@ export default {
   methods: {
     clickmonitor: function(event) {
 			// Calculate steps from event coordinates and store config FOV
-			var xCoordinate = event.offsetX;
-			var yCoordinate = event.offsetY;
+			let xCoordinate = event.offsetX;
+			let yCoordinate = event.offsetY;
 
-			var xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
-			var yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
+			let xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
+			let yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
 
-			var xSteps = xRelative * this.$store.state.apiConfig.fov[0];
-			var ySteps = yRelative * this.$store.state.apiConfig.fov[1];
+			let xSteps = xRelative * this.$store.state.apiConfig.fov[0];
+			let ySteps = yRelative * this.$store.state.apiConfig.fov[1];
 
 			// Emit a signal to move, acted on by panelNavigate.vue
 			this.$root.$emit('globalMoveEvent', xSteps, ySteps, 0, false)
@@ -106,19 +104,23 @@ export default {
 		},
 
 		recalculateSize: function () {
-			console.log("Recalculating window dimensions...")
-
 			let element = this.$refs.streamDisplay.parentNode;
-			let size = [element.clientWidth, element.clientHeight];
+			let bound = element.getBoundingClientRect()
 
-			let elem_pos = [element.getBoundingClientRect().left, element.getBoundingClientRect().top];
-			let wind_pos = [window.screenX, window.screenY];
-			let navHeight = window.outerHeight - window.innerHeight;
-			let position = [Math.max(0, wind_pos[0] + elem_pos[0]), Math.max(0, wind_pos[1] + elem_pos[1] + navHeight)];
+			let elementSize = [bound.width, bound.height]
+
+			let elementPositionOnWindow = [bound.left, bound.top]
+			let windowPositionOnDisplay = [window.screenX, window.screenY]
+			let windowChromeHeight = window.outerHeight - window.innerHeight
+			let elementPositionOnDisplay = [
+				Math.max(0, windowPositionOnDisplay[0] + elementPositionOnWindow[0]), 
+				Math.max(0, windowPositionOnDisplay[1] + elementPositionOnWindow[1] + windowChromeHeight)
+			]
+
+			this.displaySize = elementSize
+			this.displayPosition = elementPositionOnDisplay
 
-			this.displaySize = size;
 			console.log(`Size: ${this.displaySize}`)
-			this.displayPosition = position;
 			console.log(`Position: ${this.displayPosition}`)
 		},
 
@@ -149,7 +151,7 @@ export default {
 					}
 				}
 				else {
-					var letpayload = {}
+					var payload = {}
 				}
 
 				// Send preview request

From 0f23c93ae8fb5230359866ce8794817f167b1510 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Tue, 11 Jun 2019 09:39:36 +0100
Subject: [PATCH 17/48] Halved resize timeout

---
 src/components/viewComponents/streamDisplay.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
index 3205ecfa..342caf7d 100644
--- a/src/components/viewComponents/streamDisplay.vue
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -90,7 +90,7 @@ export default {
 		handleResize: function(event) {
 			// Only fires resize event after no resize in 500ms (prevents resize event spam)
 			clearTimeout(this.resizeTimeoutId);
-			this.resizeTimeoutId = setTimeout(this.handleDoneResize, 500)
+			this.resizeTimeoutId = setTimeout(this.handleDoneResize, 250)
 		},
 
 		handleDoneResize: function() {

From cfcb34727ac141f7e9d584021defe2b5910f4bfa Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Tue, 11 Jun 2019 09:44:34 +0100
Subject: [PATCH 18/48] Toggling localmode no longer sends request

---
 src/components/controlComponents/paneConnect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/controlComponents/paneConnect.vue b/src/components/controlComponents/paneConnect.vue
index ffcb8824..efb02fa9 100644
--- a/src/components/controlComponents/paneConnect.vue
+++ b/src/components/controlComponents/paneConnect.vue
@@ -160,7 +160,7 @@ export default {
       this.$store.commit("changeSetting", ['trackWindow', state]);
       this.$store.commit("changeSetting", ['disableStream', state]);
       this.$store.commit("changeSetting", ['autoGpuPreview', state]);
-      this.$root.$emit('globalTogglePreview', state)
+      //this.$root.$emit('globalTogglePreview', state)
     },
 
     autofillHost: function (host) {

From 4e0ca3eb8d536ad41f0b076f5637e5e8c0e1f13e Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Tue, 11 Jun 2019 09:52:35 +0100
Subject: [PATCH 19/48] Iterated to beta 3

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

diff --git a/package.json b/package.json
index e66358e6..38ada8ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.3",
   "private": true,
   "description": "An electron-based user client for the OpenFlexure Microscope Server",
   "author": "OpenFlexure <contact@openflexure.org> (https://www.openflexure.org)",

From 8500d545f95d91bfff4b07ea9186eb7f75f3d3b8 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Tue, 11 Jun 2019 10:28:15 +0100
Subject: [PATCH 20/48] Default cursor over section headings

---
 src/components/genericComponents/tabContent.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/genericComponents/tabContent.vue b/src/components/genericComponents/tabContent.vue
index 77c0d575..bcdef3d7 100644
--- a/src/components/genericComponents/tabContent.vue
+++ b/src/components/genericComponents/tabContent.vue
@@ -36,6 +36,7 @@ export default {
   font-size: 12px;
   text-transform: uppercase;
   line-height: 20px;
+  cursor: default;
 }
 
 .section-content, .section-heading {

From e1a9f7625e641626e7953d1139c62cd6d2f6fecf Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 12 Jun 2019 10:57:51 +0100
Subject: [PATCH 21/48] Minor theming tweaks

---
 src/assets/less/theme.less | 58 +++++++++++++++++++++++++++++++++-----
 1 file changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index bc48ab18..b7d2f087 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -125,6 +125,11 @@
 @inverse-global-color:                          fade(@global-inverse-color, 80%);
 @inverse-global-muted-color:                    fade(@global-inverse-color, 60%);
 
+//
+// Paper
+//
+@paper-border-radius:                           4px;
+
 
 /* ========================================================================
    Theme
@@ -153,6 +158,51 @@
 @navbar-nav-item-line-background:               currentColor;
 @navbar-nav-item-line-transition-duration:      0.3s;
 
+.uk-navbar-dropdown.uk-open {
+    border-radius: @paper-border-radius;
+}
+
+/*
+ * Cards
+ */
+
+.uk-card {
+    border-radius: @paper-border-radius;
+}
+
+.uk-card-media-top img {
+    border-radius: @paper-border-radius @paper-border-radius 0 0;
+}
+
+.uk-card-default .uk-card-footer {
+    border-top: 1px solid  rgba(180, 180, 180, 0.25);
+}
+
+.uk-card-primary .uk-card-footer {
+    border-top: 1px solid  rgba(0, 0, 0, 0.075);
+}
+
+.hook-inverse() {
+    // Override background colour in dark mode
+    .uk-card-default {
+        background-color: #2a2a2a !important;
+    }
+
+    // Lighten on hover to show depth in dark mode
+    .uk-card-default:hover {
+        transition: background-color @animation-fast-duration ease;
+        background-color: #333 !important;
+    }
+}
+
+/*
+ * Modal
+ */
+.uk-modal-dialog {
+    border-radius: @paper-border-radius;
+    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+    transition: 0.3s ease !important;
+}
 
 /*
  * Links
@@ -173,13 +223,7 @@
 .uk-button {
     border-radius: 2px;
 }
-/*
-.uk-button-primary {
-    background-color: rgba(180, 180, 180, 0.1);
-    color: @global-primary-background;
-    border: 1px solid @global-primary-background;
-}
- */
+
 .uk-button-danger {
     background-color: transparent;
     color: #f0506e;

From 1400f94b2fd67bb1e07db40744938112a4c226a9 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 13 Jun 2019 13:51:44 +0100
Subject: [PATCH 22/48] Added example of plugin using basic HTML body

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

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 9336cddd..7a207e3a 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -7,6 +7,7 @@
       <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
     </div>
 
     <!-- Corresponding vertical tab content -->
@@ -24,6 +25,9 @@
         <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
           <paneSettings/>
         </tabContent>
+        <tabContent v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
+          <p v-html="plugin.content"></p>
+        </tabContent>
       </div>
     </div>
 
@@ -62,6 +66,14 @@ export default {
     return {
       currentTab: 'connect',
       showControlBar: true,
+      plugins: [
+        {
+          id: 'test-plugin',
+          icon: 'code',
+          requireConnection: false,
+          content: "<b>HELLO WORLD</b>"
+        }
+      ]
     }  
   },
 

From 4a0351f80c2b043b1e588c4deb41b6b43d33ceca Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 13 Jun 2019 17:55:33 +0100
Subject: [PATCH 23/48] Added first basic form elements

---
 src/components/panelLeft.vue                  | 58 ++++++++++++++++---
 .../formComponents/JsonForm.vue               | 50 ++++++++++++++++
 .../fieldComponents/htmlBlock.vue             | 18 ++++++
 .../fieldComponents/numberInput.vue           | 23 ++++++++
 .../fieldComponents/selectList.vue            | 29 ++++++++++
 .../fieldComponents/textInput.vue             | 28 +++++++++
 6 files changed, 197 insertions(+), 9 deletions(-)
 create mode 100644 src/components/pluginComponents/formComponents/JsonForm.vue
 create mode 100644 src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
 create mode 100644 src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
 create mode 100644 src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
 create mode 100644 src/components/pluginComponents/formComponents/fieldComponents/textInput.vue

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 7a207e3a..7631cc40 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -7,7 +7,9 @@
       <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+
       <tabIcon v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
+
     </div>
 
     <!-- Corresponding vertical tab content -->
@@ -25,9 +27,11 @@
         <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
           <paneSettings/>
         </tabContent>
+
         <tabContent v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
-          <p v-html="plugin.content"></p>
+          <JsonForm :schema="plugin.schema"/>
         </tabContent>
+  
       </div>
     </div>
 
@@ -40,14 +44,17 @@
 import axios from 'axios'
 
 // Import generic components
-import tabIcon from './genericComponents/tabIcon.vue'
-import tabContent from './genericComponents/tabContent.vue'
+import tabIcon from './genericComponents/tabIcon'
+import tabContent from './genericComponents/tabContent'
 
 // Import pane components
-import paneConnect from './controlComponents/paneConnect.vue'
-import paneNavigate from './controlComponents/paneNavigate.vue'
-import paneCapture from './controlComponents/paneCapture.vue'
-import paneSettings from './controlComponents/paneSettings.vue'
+import paneConnect from './controlComponents/paneConnect'
+import paneNavigate from './controlComponents/paneNavigate'
+import paneCapture from './controlComponents/paneCapture'
+import paneSettings from './controlComponents/paneSettings'
+
+// Import plugin components
+import JsonForm from './pluginComponents/formComponents/JsonForm'
 
 // Export main app
 export default {
@@ -59,7 +66,8 @@ export default {
     paneConnect,
     paneNavigate,
     paneCapture,
-    paneSettings
+    paneSettings,
+    JsonForm
   },
 
   data: function () {
@@ -71,7 +79,39 @@ export default {
           id: 'test-plugin',
           icon: 'code',
           requireConnection: false,
-          content: "<b>HELLO WORLD</b>"
+          schema: [
+            {
+              fieldType: "htmlBlock",
+              name: "heading",
+              content: "<b>This is a cool plugin!</b>"
+            },
+            {
+              fieldType: "selectList",
+              name: "title",
+              multi: false,
+              label: "Title",
+              options: ["", "Mr", "Ms", "Mx", "Dr", "Madam", "Lord"]
+            },
+            {
+              fieldType: "textInput",
+              placeholder: "First Name",
+              label: "First Name",
+              name: "firstName"
+            },
+            {
+              fieldType: "textInput",
+              placeholder: "Last Name",
+              label: "Last Name",
+              name: "lastName"
+            },
+            {
+              fieldType: "numberInput",
+              placeholder: "Age",
+              name: "age",
+              label: "Age",
+              minValue: 0
+            }
+          ]
         }
       ]
     }  
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
new file mode 100644
index 00000000..aaae3906
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <component v-for="(field, index) in schema"
+      :key="index"
+      :is="field.fieldType"
+      v-model="formData[field.name]"
+      v-bind="field">
+
+    </component>
+  </div>
+</template>
+
+<script>
+
+import numberInput from "./fieldComponents/numberInput";
+import selectList from "./fieldComponents/selectList";
+import textInput from "./fieldComponents/textInput";
+import htmlBlock from "./fieldComponents/htmlBlock";
+
+export default {
+  name: 'JsonForm',
+
+  components: { 
+    numberInput, 
+    selectList, 
+    textInput,
+    htmlBlock
+  },
+
+  props: {
+    'schema': {
+      type: Array,
+      required: true
+    }
+  },
+
+  data: function () {
+    return {
+      formData: {}
+    }
+  },
+
+  created: function () {
+    // `this` points to the vm instance
+    console.log(this.schema)
+  }
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue b/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
new file mode 100644
index 00000000..3bc790b4
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <p v-html="content"></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'textInput',
+  props: [ 
+    'label', 
+    'name',
+    'content'
+  ]
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue b/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
new file mode 100644
index 00000000..2b78c6af
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+
+    <input 
+      type="number"
+      :name="name"
+      :value="value"
+      @input="$emit('input', $event.target.value)"
+      :placeholder="placeholder"
+    >
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'numberInput',
+  props: ['placeholder', 'label', 'name', 'value']
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue b/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
new file mode 100644
index 00000000..bc139bc4
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+    <select :multiple="multi"
+            :value="value"
+            @input="$emit('input',
+            $event.target.value)">
+      <option v-for="option in options"
+              :key="option">
+        {{option}}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selectList',
+  props: [
+    'multi', 
+    'options', 
+    'name', 
+    'label',
+    'value'
+  ]
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue b/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
new file mode 100644
index 00000000..e4096f01
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+
+    <input 
+      type="text"
+      :name="name"
+      :value="value"
+      @input="$emit('input',$event.target.value)"
+      :placeholder="placeholder"
+    >
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'textInput',
+  props: [
+    'placeholder', 
+    'label', 
+    'name',
+    'value'
+  ]
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file

From 5e69e52bcd997d0ea86daa00d2d9eaee09163c44 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 15:35:08 +0100
Subject: [PATCH 24/48] Added strict one-way binding to all form components

---
 src/components/panelLeft.vue                  | 43 ++++++++++++----
 .../formComponents/JsonForm.vue               | 50 +++++++++++++++----
 .../fieldComponents/checkList.vue             | 47 +++++++++++++++++
 .../fieldComponents/htmlBlock.vue             |  1 +
 .../fieldComponents/numberInput.vue           | 16 ++++--
 .../fieldComponents/radioList.vue             | 29 +++++++++++
 .../fieldComponents/selectList.vue            | 18 ++++---
 .../fieldComponents/textInput.vue             | 10 ++--
 8 files changed, 181 insertions(+), 33 deletions(-)
 create mode 100644 src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
 create mode 100644 src/components/pluginComponents/formComponents/fieldComponents/radioList.vue

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 7631cc40..915b0a75 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -94,15 +94,10 @@ export default {
             },
             {
               fieldType: "textInput",
-              placeholder: "First Name",
-              label: "First Name",
-              name: "firstName"
-            },
-            {
-              fieldType: "textInput",
-              placeholder: "Last Name",
-              label: "Last Name",
-              name: "lastName"
+              placeholder: "Name",
+              label: "Name",
+              name: "name",
+              value: "Squidward"
             },
             {
               fieldType: "numberInput",
@@ -110,7 +105,35 @@ export default {
               name: "age",
               label: "Age",
               minValue: 0
-            }
+            },
+            [
+              {
+                fieldType: "numberInput",
+                placeholder: "Number",
+                name: "leftnum",
+                label: "Left"
+              },
+              {
+                fieldType: "numberInput",
+                placeholder: "Number",
+                name: "rightnum",
+                label: "Right"
+              }
+            ],
+            {
+              fieldType: "radioList",
+              name: "coolness",
+              label: "Coolness",
+              options: ["None", "Some", "Very"],
+              value: "Some"
+            },
+            {
+              fieldType: "checkList",
+              name: "ingredients",
+              label: "Ingredients",
+              options: ["Pork", "Pie"],
+              value: ["Pork"]
+            },
           ]
         }
       ]
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index aaae3906..27ef597f 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -1,12 +1,24 @@
 <template>
-  <div>
-    <component v-for="(field, index) in schema"
-      :key="index"
-      :is="field.fieldType"
-      v-model="formData[field.name]"
-      v-bind="field">
+  <div class="uk-form-stacked">
+    <div v-for="(field, index) in schema" :key="index"> 
+    
+      <div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>
+        <div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand"> 
+          <component
+            :is="subfield.fieldType"
+            @input="updateForm(subfield.name, $event)"
+            v-bind="subfield">
+          </component>
+        </div>
+      </div>
+      
+      <component
+        :is="field.fieldType"
+        @input="updateForm(field.name, $event)"
+        v-bind="field">
+      </component>
 
-    </component>
+    </div>
   </div>
 </template>
 
@@ -16,6 +28,8 @@ import numberInput from "./fieldComponents/numberInput";
 import selectList from "./fieldComponents/selectList";
 import textInput from "./fieldComponents/textInput";
 import htmlBlock from "./fieldComponents/htmlBlock";
+import radioList from "./fieldComponents/radioList";
+import checkList from "./fieldComponents/checkList"
 
 export default {
   name: 'JsonForm',
@@ -24,7 +38,9 @@ export default {
     numberInput, 
     selectList, 
     textInput,
-    htmlBlock
+    htmlBlock,
+    radioList,
+    checkList
   },
 
   props: {
@@ -43,8 +59,24 @@ export default {
   created: function () {
     // `this` points to the vm instance
     console.log(this.schema)
+  },
+
+  methods: {
+    updateForm(fieldName, value) {
+      console.log(`${fieldName}: ${value}`)
+      this.$set(this.formData, fieldName, value);
+      this.$emit('input', this.formData)
+    }
   }
 }
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.flex-container {
+  display: flex;
+}
+
+.flex-container > div {
+  flex-basis: 100%
+}
+</style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue b/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
new file mode 100644
index 00000000..62a832f8
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+
+    <div class="uk-form-controls">
+
+      <div v-for="option in options" :key="option">
+        <label><input class="uk-checkbox" type="checkbox" v-bind:value="option" v-model="computedChecked"> {{ option }}</label>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'checkList',
+
+  props: [
+    'options', 
+    'name', 
+    'label',
+    'value'
+  ],
+
+  data: function () {
+    return {
+      itemsChecked: this.value || []
+    }
+  },
+
+  computed: {
+    computedChecked: {
+      get() {
+        return this.itemsChecked
+      },
+      set(val) {
+        this.itemsChecked = val
+        this.$emit('input', this.itemsChecked)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue b/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
index 3bc790b4..04728097 100644
--- a/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
+++ b/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
@@ -7,6 +7,7 @@
 <script>
 export default {
   name: 'textInput',
+
   props: [ 
     'label', 
     'name',
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue b/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
index 2b78c6af..57961726 100644
--- a/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
+++ b/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
-    <label>{{label}}</label>
+    <label class="uk-form-label">{{label}}</label>
 
     <input 
+      class="uk-input uk-form-small"
       type="number"
       :name="name"
       :value="value"
@@ -17,7 +18,16 @@
 
 export default {
   name: 'numberInput',
-  props: ['placeholder', 'label', 'name', 'value']
+
+  props: [
+    'placeholder', 
+    'label', 
+    'name', 
+    'value'
+  ]
+
 }
 
-</script>
\ No newline at end of file
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/radioList.vue b/src/components/pluginComponents/formComponents/fieldComponents/radioList.vue
new file mode 100644
index 00000000..67b8dcb6
--- /dev/null
+++ b/src/components/pluginComponents/formComponents/fieldComponents/radioList.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+
+    <div class="uk-form-controls">
+
+      <div v-for="option in options" :key="option">
+        <label><input class="uk-radio" type="radio" :name="name" :value="option" :checked="value==option" @input="$emit('input', $event.target.value)"> {{ option }}</label>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'radioList',
+
+  props: [
+    'options', 
+    'name', 
+    'label',
+    'value'
+  ]
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue b/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
index bc139bc4..6009767c 100644
--- a/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
+++ b/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
@@ -1,14 +1,17 @@
 <template>
   <div>
-    <label>{{label}}</label>
-    <select :multiple="multi"
-            :value="value"
-            @input="$emit('input',
-            $event.target.value)">
-      <option v-for="option in options"
-              :key="option">
+    <label class="uk-form-label">{{label}}</label>
+
+    <select
+      class="uk-select uk-form-small"
+      :multiple="multi"
+      :value="value"
+      @input="$emit('input', $event.target.value)"
+    >
+      <option v-for="option in options" :key="option">
         {{option}}
       </option>
+
     </select>
   </div>
 </template>
@@ -16,6 +19,7 @@
 <script>
 export default {
   name: 'selectList',
+
   props: [
     'multi', 
     'options', 
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue b/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
index e4096f01..b001f18d 100644
--- a/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
+++ b/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
-    <label>{{label}}</label>
+    <label class="uk-form-label">{{label}}</label>
 
     <input 
+      class="uk-input uk-form-small"
       type="text"
-      :name="name"
-      :value="value"
+      v-bind:name="name"
+      v-bind:value="value"
+      v-bind:placeholder="placeholder"
       @input="$emit('input',$event.target.value)"
-      :placeholder="placeholder"
     >
 
   </div>
@@ -16,6 +17,7 @@
 <script>
 export default {
   name: 'textInput',
+
   props: [
     'placeholder', 
     'label', 

From 0fad5304f8a4fdb41e8ad1ed27269bea20c6b4df Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 16:10:17 +0100
Subject: [PATCH 25/48] Added route and submit button

---
 .../formComponents/JsonForm.vue               | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 27ef597f..2f42a821 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="uk-form-stacked">
+  <form @submit.prevent="submitForm" class="uk-form-stacked">
+
     <div v-for="(field, index) in schema" :key="index"> 
-    
       <div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>
         <div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand"> 
           <component
             :is="subfield.fieldType"
-            @input="updateForm(subfield.name, $event)"
+            v-model="formData[subfield.name]"
             v-bind="subfield">
           </component>
         </div>
@@ -14,12 +14,14 @@
       
       <component
         :is="field.fieldType"
-        @input="updateForm(field.name, $event)"
+        v-model="formData[field.name]"
         v-bind="field">
       </component>
-
     </div>
-  </div>
+
+    <button type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Submit</button>
+
+  </form>
 </template>
 
 <script>
@@ -47,6 +49,10 @@ export default {
     'schema': {
       type: Array,
       required: true
+    },
+    'route': {
+      type: String,
+      required: true
     }
   },
 
@@ -66,7 +72,13 @@ export default {
       console.log(`${fieldName}: ${value}`)
       this.$set(this.formData, fieldName, value);
       this.$emit('input', this.formData)
+    },
+
+    submitForm() {
+      console.log(`Mock-submitting form to ${this.route}:`)
+      console.log(this.formData)
     }
+
   }
 }
 </script>

From ff0fe499763bae042286f11c9686ace616949557 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 16:10:28 +0100
Subject: [PATCH 26/48] Allow multiple forms per plugin

---
 src/components/panelLeft.vue | 113 ++++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 915b0a75..f17326cd 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -29,7 +29,7 @@
         </tabContent>
 
         <tabContent v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
-          <JsonForm :schema="plugin.schema"/>
+          <JsonForm  v-for="form in plugin.forms" :key="form.route" :route="form.route" :schema="form.schema"/>
         </tabContent>
   
       </div>
@@ -79,62 +79,65 @@ export default {
           id: 'test-plugin',
           icon: 'code',
           requireConnection: false,
-          schema: [
+          forms: [
             {
-              fieldType: "htmlBlock",
-              name: "heading",
-              content: "<b>This is a cool plugin!</b>"
-            },
-            {
-              fieldType: "selectList",
-              name: "title",
-              multi: false,
-              label: "Title",
-              options: ["", "Mr", "Ms", "Mx", "Dr", "Madam", "Lord"]
-            },
-            {
-              fieldType: "textInput",
-              placeholder: "Name",
-              label: "Name",
-              name: "name",
-              value: "Squidward"
-            },
-            {
-              fieldType: "numberInput",
-              placeholder: "Age",
-              name: "age",
-              label: "Age",
-              minValue: 0
-            },
-            [
-              {
-                fieldType: "numberInput",
-                placeholder: "Number",
-                name: "leftnum",
-                label: "Left"
-              },
-              {
-                fieldType: "numberInput",
-                placeholder: "Number",
-                name: "rightnum",
-                label: "Right"
-              }
-            ],
-            {
-              fieldType: "radioList",
-              name: "coolness",
-              label: "Coolness",
-              options: ["None", "Some", "Very"],
-              value: "Some"
-            },
-            {
-              fieldType: "checkList",
-              name: "ingredients",
-              label: "Ingredients",
-              options: ["Pork", "Pie"],
-              value: ["Pork"]
-            },
+              route: "/test/foo",
+              schema: [
+                {
+                  fieldType: "htmlBlock",
+                  name: "heading",
+                  content: "<b>This is a cool plugin!</b>"
+                },
+                {
+                  fieldType: "selectList",
+                  name: "title",
+                  multi: false,
+                  label: "Title",
+                  options: ["", "Mr", "Ms", "Mx", "Dr", "Madam", "Lord"]
+                },
+                {
+                  fieldType: "textInput",
+                  placeholder: "Name",
+                  label: "Name",
+                  name: "name"
+                },
+                {
+                  fieldType: "numberInput",
+                  placeholder: "Age",
+                  name: "age",
+                  label: "Age",
+                  minValue: 0
+                },
+                [
+                  {
+                    fieldType: "numberInput",
+                    placeholder: "Number",
+                    name: "leftnum",
+                    label: "Left"
+                  },
+                  {
+                    fieldType: "numberInput",
+                    placeholder: "Number",
+                    name: "rightnum",
+                    label: "Right"
+                  }
+                ],
+                {
+                  fieldType: "radioList",
+                  name: "coolness",
+                  label: "Coolness",
+                  options: ["None", "Some", "Very"]
+                },
+                {
+                  fieldType: "checkList",
+                  name: "ingredients",
+                  label: "Ingredients",
+                  options: ["Pork", "Pie"]
+                },
+              ]
+            }
           ]
+          
         }
       ]
     }  

From 6afca186ce58d197481ec5708da3b208ee41ae53 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 17:40:12 +0100
Subject: [PATCH 27/48] Added dev environment

---
 .env.development.web | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .env.development.web

diff --git a/.env.development.web b/.env.development.web
new file mode 100644
index 00000000..284c703f
--- /dev/null
+++ b/.env.development.web
@@ -0,0 +1,3 @@
+NODE_ENV=development
+VUE_APP_PLATFORM=web
+VUE_APP_TARGET=web
\ No newline at end of file

From e60fd375e32c9a4047304e6cc00c67791ff2adfb Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 17:40:20 +0100
Subject: [PATCH 28/48] Use dev environment in serve

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

diff --git a/package.json b/package.json
index 38ada8ba..5f8bdedd 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "build:web": "vue-cli-service build --mode production.web",
     "build:app": "vue-cli-service build --mode production.app",
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve  --mode development.web",
     "start": "npm run build:app && electron app/app.js",
     "dist:linux": "electron-builder --linux --config app/builder-config-x86_64.yaml",
     "dist:raspi": "electron-builder --linux --config app/builder-config-raspi.yaml",

From 36eb3b43966c3298dfd755704e7cf56a0f2566bc Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 17:40:40 +0100
Subject: [PATCH 29/48] Added plugin schemas to Vuex store

---
 src/store.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/store.js b/src/store.js
index 5197cfb1..aa1a67dd 100644
--- a/src/store.js
+++ b/src/store.js
@@ -15,6 +15,7 @@ export default new Vuex.Store({
     error: '',
     apiConfig: {},
     apiState: {},
+    apiPlugins: [],
     globalSettings: {
       disableStream: false,
       autoGpuPreview: false,
@@ -38,6 +39,9 @@ export default new Vuex.Store({
     commitState(state, stateData) {
       state.apiState = stateData;
     },
+    commitPlugins(state, pluginData) {
+      state.apiPlugins = pluginData;
+    },
     changeSetting(state, [key, value]) {
       state.globalSettings[key] = value;
     },
@@ -47,6 +51,7 @@ export default new Vuex.Store({
       state.error = null
       state.apiConfig = {}
       state.apiState = {}
+      state.apiPlugins = []
     },
     setConnected(state) {
       state.waiting = false
@@ -72,6 +77,9 @@ export default new Vuex.Store({
         .then (() => {
           context.dispatch('updateState')
         })
+        .then (() => {
+          context.dispatch('updatePlugins')
+        })
         .then (() => {
           resolve()
         })
@@ -116,6 +124,25 @@ export default new Vuex.Store({
       return new Promise(sendRequest)
     },
 
+    updatePlugins(context, uri=`${context.getters.uri}/plugin`) {
+      context.commit('changeWaiting', true)
+  
+      var sendRequest = function(resolve, reject) {
+        axios.get(uri)
+        .then(response => { 
+          console.log("PLUGINS")
+          console.log(response.data)
+          context.commit('commitPlugins', response.data)
+          context.commit('setConnected')
+          resolve()
+        })
+        .catch(error => {
+          reject(new Error(error))
+        })
+      }
+      return new Promise(sendRequest)
+    },
+
     pollTask(context, [taskId, timeout, interval]) {
       var endTime = Number(new Date()) + (timeout*1000 || 30000);
       interval = interval*1000 || 500;

From 59aaa12c59cfdd8729d74e4362e6e5c245ef0403 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 17:40:55 +0100
Subject: [PATCH 30/48] Get plugins from Vuex store

---
 src/components/panelLeft.vue | 80 +++++-------------------------------
 1 file changed, 10 insertions(+), 70 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index f17326cd..c152e6e0 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -8,7 +8,7 @@
       <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
 
-      <tabIcon v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
 
     </div>
 
@@ -28,7 +28,7 @@
           <paneSettings/>
         </tabContent>
 
-        <tabContent v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
+        <tabContent v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
           <JsonForm  v-for="form in plugin.forms" :key="form.route" :route="form.route" :schema="form.schema"/>
         </tabContent>
   
@@ -73,73 +73,7 @@ export default {
   data: function () {
     return {
       currentTab: 'connect',
-      showControlBar: true,
-      plugins: [
-        {
-          id: 'test-plugin',
-          icon: 'code',
-          requireConnection: false,
-          forms: [
-            {
-              route: "/test/foo",
-              schema: [
-                {
-                  fieldType: "htmlBlock",
-                  name: "heading",
-                  content: "<b>This is a cool plugin!</b>"
-                },
-                {
-                  fieldType: "selectList",
-                  name: "title",
-                  multi: false,
-                  label: "Title",
-                  options: ["", "Mr", "Ms", "Mx", "Dr", "Madam", "Lord"]
-                },
-                {
-                  fieldType: "textInput",
-                  placeholder: "Name",
-                  label: "Name",
-                  name: "name"
-                },
-                {
-                  fieldType: "numberInput",
-                  placeholder: "Age",
-                  name: "age",
-                  label: "Age",
-                  minValue: 0
-                },
-                [
-                  {
-                    fieldType: "numberInput",
-                    placeholder: "Number",
-                    name: "leftnum",
-                    label: "Left"
-                  },
-                  {
-                    fieldType: "numberInput",
-                    placeholder: "Number",
-                    name: "rightnum",
-                    label: "Right"
-                  }
-                ],
-                {
-                  fieldType: "radioList",
-                  name: "coolness",
-                  label: "Coolness",
-                  options: ["None", "Some", "Very"]
-                },
-                {
-                  fieldType: "checkList",
-                  name: "ingredients",
-                  label: "Ingredients",
-                  options: ["Pork", "Pie"]
-                },
-              ]
-            }
-          ]
-          
-        }
-      ]
+      showControlBar: true
     }  
   },
 
@@ -153,8 +87,14 @@ export default {
         this.showControlBar = true
         this.currentTab = tab
       }
-    }
+    },
 
+  },
+
+  computed: {
+    pluginApiUri: function () {
+      return this.$store.getters.uri + "/plugin"
+    },
   }
 
 }

From ad49e49b4a6e9fcfbb565a3719859ac7cb0b7b10 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 17:41:07 +0100
Subject: [PATCH 31/48] Generate full form submit URL

---
 .../pluginComponents/formComponents/JsonForm.vue       | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 2f42a821..dcd5e622 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -75,11 +75,19 @@ export default {
     },
 
     submitForm() {
-      console.log(`Mock-submitting form to ${this.route}:`)
+      console.log(`Mock-submitting form to ${this.submitApiUri}:`)
       console.log(this.formData)
     }
 
+  },
+
+  computed: {
+    submitApiUri: function () {
+      return this.$store.getters.uri + this.route
+    },
+
   }
+
 }
 </script>
 

From 4db11c018d44b91c056c59114d068b5a81326d63 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 14 Jun 2019 21:42:19 +0100
Subject: [PATCH 32/48] Tidied up

---
 src/components/pluginComponents/formComponents/JsonForm.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index dcd5e622..46f0fe8c 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -62,14 +62,8 @@ export default {
     }
   },
 
-  created: function () {
-    // `this` points to the vm instance
-    console.log(this.schema)
-  },
-
   methods: {
     updateForm(fieldName, value) {
-      console.log(`${fieldName}: ${value}`)
       this.$set(this.formData, fieldName, value);
       this.$emit('input', this.formData)
     },

From 09f9ad6f7d7d5feb160dc616a1e17f4679e09dc3 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 11:41:45 +0100
Subject: [PATCH 33/48] Switch to material icons for tabs

---
 package-lock.json                            |  7 ++++++-
 package.json                                 |  3 ++-
 src/assets/less/theme.less                   |  4 ++++
 src/components/genericComponents/tabIcon.vue |  2 ++
 src/components/panelLeft.vue                 | 22 ++++++++++++++------
 src/main.js                                  |  3 +++
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3c5ef6a..1a06229d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7307,6 +7307,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
diff --git a/package.json b/package.json
index 5f8bdedd..6890d8c4 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "custom-electron-titlebar": "^3.0.8",
     "electron-context-menu": "^0.11.0",
     "electron-store": "^3.2.0",
-    "electron-updater": "^4.0.6"
+    "electron-updater": "^4.0.6",
+    "material-design-icons": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index b7d2f087..7892ae82 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -207,6 +207,10 @@
 /*
  * Links
  */
+.uk-link {
+    color: @global-muted-color;
+}
+
 .uk-link:hover, a:hover {
     color: @global-primary-background;
 }
diff --git a/src/components/genericComponents/tabIcon.vue b/src/components/genericComponents/tabIcon.vue
index 40e28478..0c0bbc18 100644
--- a/src/components/genericComponents/tabIcon.vue
+++ b/src/components/genericComponents/tabIcon.vue
@@ -1,9 +1,11 @@
 <template>
   <a 
     href="#" 
+    class="uk-link"
     :class="classObject" 
     :uk-tooltip="tooltipOptions"
     @click="setThisTab">
+    <slot></slot>
   </a>
 
 </template>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index c152e6e0..ebad5737 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -3,12 +3,22 @@
 
     <!-- Vertical tab bar -->
     <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
-      <tabIcon id="connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
-      <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-      <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-      <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">settings_ethernet</i>
+      </tabIcon>
+      <tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">gamepad</i>  
+      </tabIcon>
+      <tabIcon id="capture" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">camera_alt</i>
+      </tabIcon>
+      <tabIcon id="settings" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">settings</i>  
+      </tabIcon>
 
-      <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">{{ plugin.icon || "extension" }}</i> 
+      </tabIcon>
 
     </div>
 
@@ -118,7 +128,7 @@ export default {
 }
 
 #switcher-left a{
-  padding: 12px 20px;
+  padding: 10px 16px;
 }
 
 #switcher-left{
diff --git a/src/main.js b/src/main.js
index 8d31ce2d..71ffe558 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,9 @@ import UIkit from 'uikit';
 import Icons from 'uikit/dist/js/uikit-icons';
 UIkit.use(Icons);
 
+// Import MD icons
+import 'material-design-icons/iconfont/material-icons.css'
+
 Vue.config.productionTip = false
 
 Vue.mixin({

From f6ddd7f1c26bddcab08214eb69eb1b18e925acbd Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 12:14:29 +0100
Subject: [PATCH 34/48] Actually send requests

---
 .../formComponents/JsonForm.vue               | 55 +++++++++++++++++--
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 46f0fe8c..dc21fc3f 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -19,12 +19,17 @@
       </component>
     </div>
 
-    <button type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Submit</button>
+    <div class="uk-text-center uk-container" v-if="taskRunning">
+      <div class="center-spinner" uk-spinner></div>
+    </div>
+
+    <button v-bind:hidden="taskRunning" type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Submit</button>
 
   </form>
 </template>
 
 <script>
+import axios from 'axios'
 
 import numberInput from "./fieldComponents/numberInput";
 import selectList from "./fieldComponents/selectList";
@@ -58,7 +63,8 @@ export default {
 
   data: function () {
     return {
-      formData: {}
+      formData: {},
+      taskRunning: false
     }
   },
 
@@ -69,15 +75,52 @@ export default {
     },
 
     submitForm() {
-      console.log(`Mock-submitting form to ${this.submitApiUri}:`)
-      console.log(this.formData)
-    }
+      this.newQuickRequest(this.formData)
+    },
+
+    newQuickRequest: function(params) {
+      console.log(this.submitApiUri)
+      console.log(params)
+      // Send a quick request
+      axios.post(this.submitApiUri, params)
+        .then(response => { 
+          console.log(response)
+          // TODO: Have this perform a GET request to update all available parameters
+        })
+        .catch(error => {
+          this.modalError(error) // Let mixin handle error
+        })
+    },
+
+    newLongRequest: function(params) {
+        this.taskRunning = true
+        axios.post(this.submitApiUri, params)
+        .then(response => { 
+          console.log("Task ID: " + response.data.id)
+          // Start the store polling TaskId for success
+          return this.$store.dispatch('pollTask', [response.data.id, null, null])
+        })
+        .then(() => {
+          console.log("Successfully finished task")
+        })
+        .catch(error => {
+          this.modalError(error) // Let mixin handle error
+        })
+        .finally(() => {
+          console.log("Cleaning up after task.")
+          this.taskRunning = false
+        })
+    },
 
   },
 
   computed: {
+    pluginApiUri: function () {
+      return this.$store.getters.uri + "/plugin"
+    },
+
     submitApiUri: function () {
-      return this.$store.getters.uri + this.route
+      return this.pluginApiUri + this.route
     },
 
   }

From 2f9eef920acb6f9e5aca781e3e678a72b11c28bc Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 12:14:35 +0100
Subject: [PATCH 35/48] Nice little divider

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

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index ebad5737..256c1271 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -16,6 +16,8 @@
         <i class="material-icons">settings</i>  
       </tabIcon>
 
+      <hr>
+
       <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab">
         <i class="material-icons">{{ plugin.icon || "extension" }}</i> 
       </tabIcon>

From 5f19d6392f07d8324bead5f86b1a1d9ab3d6460a Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 15:04:57 +0100
Subject: [PATCH 36/48] pollTask resolves with full response data

---
 src/store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store.js b/src/store.js
index aa1a67dd..88c03ee6 100644
--- a/src/store.js
+++ b/src/store.js
@@ -155,7 +155,7 @@ export default new Vuex.Store({
           var result = response.data.status
           // If the task ends with success
           if(result == 'success') {
-              resolve(response.data.return)
+            resolve(response.data)
           }
           // If task ends with an error
           else if (result == 'error') {
@@ -163,7 +163,7 @@ export default new Vuex.Store({
           }
           // If the condition isn't met but the timeout hasn't elapsed, go again
           else if (Number(new Date()) < endTime) {
-              setTimeout(checkCondition, interval, resolve, reject)
+            setTimeout(checkCondition, interval, resolve, reject)
           }
           // Didn't match and too much time, reject!
           else {

From 1b9dac120b1a661ed4775f65bf63741de5b6ea13 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 15:05:13 +0100
Subject: [PATCH 37/48] Handle long running task plugins

---
 src/components/panelLeft.vue                  | 19 ++++++++++++---
 .../formComponents/JsonForm.vue               | 24 +++++++++++++++----
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 256c1271..245ca030 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -18,7 +18,11 @@
 
       <hr>
 
-      <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab">
+      <tabIcon v-for="plugin in $store.state.apiPlugins" @set-tab="setTab"
+        :key="plugin.id" 
+        :id="plugin.id" 
+        :requireConnection="plugin.requiresConnection" 
+        :currentTab="currentTab">
         <i class="material-icons">{{ plugin.icon || "extension" }}</i> 
       </tabIcon>
 
@@ -40,8 +44,17 @@
           <paneSettings/>
         </tabContent>
 
-        <tabContent v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
-          <JsonForm  v-for="form in plugin.forms" :key="form.route" :route="form.route" :schema="form.schema"/>
+        <tabContent v-for="plugin in $store.state.apiPlugins" 
+          :key="plugin.id" 
+          :id="plugin.id" 
+          :requireConnection="plugin.requiresConnection" 
+          :currentTab="currentTab">
+          <JsonForm  v-for="form in plugin.forms" 
+            :key="form.route" 
+            :route="form.route"
+            :isTask="form.isTask"
+            :submitLabel="form.submitLabel"
+            :schema="form.schema"/>
         </tabContent>
   
       </div>
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index dc21fc3f..aae12748 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -23,7 +23,7 @@
       <div class="center-spinner" uk-spinner></div>
     </div>
 
-    <button v-bind:hidden="taskRunning" type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Submit</button>
+    <button v-bind:hidden="taskRunning" type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
 
   </form>
 </template>
@@ -58,6 +58,16 @@ export default {
     'route': {
       type: String,
       required: true
+    },
+    'isTask': {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    'submitLabel': {
+      type: String,
+      required: false,
+      default: "Submit"
     }
   },
 
@@ -75,7 +85,12 @@ export default {
     },
 
     submitForm() {
-      this.newQuickRequest(this.formData)
+      if (this.isTask == true) {
+        this.newLongRequest(this.formData)
+      }
+      else {
+        this.newQuickRequest(this.formData)
+      }
     },
 
     newQuickRequest: function(params) {
@@ -100,8 +115,9 @@ export default {
           // Start the store polling TaskId for success
           return this.$store.dispatch('pollTask', [response.data.id, null, null])
         })
-        .then(() => {
-          console.log("Successfully finished task")
+        .then(response => {
+          console.log("Successfully finished task with response:")
+          console.log(response)
         })
         .catch(error => {
           this.modalError(error) // Let mixin handle error

From 864628a01430b4c43bcbc1c480deda3d6e21e346 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 17:33:38 +0100
Subject: [PATCH 38/48] Fixed component name

---
 .../formComponents/fieldComponents/htmlBlock.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue b/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
index 04728097..2b4906c0 100644
--- a/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
+++ b/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'textInput',
+  name: 'htmlBlock',
 
   props: [ 
     'label', 

From a5c4772d43741484270a151989ca109aa2b6747f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 17:33:48 +0100
Subject: [PATCH 39/48] Added selfUpdate prop

---
 src/components/panelLeft.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 245ca030..cd2263d0 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -54,6 +54,7 @@
             :route="form.route"
             :isTask="form.isTask"
             :submitLabel="form.submitLabel"
+            :selfUpdate="form.selfUpdate"
             :schema="form.schema"/>
         </tabContent>
   

From 6273537174f68d6895b25cfd049daf7a1e010ff2 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 17:34:03 +0100
Subject: [PATCH 40/48] Added form initialisation and updating

---
 .../formComponents/JsonForm.vue               | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index aae12748..bfc56141 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -1,6 +1,8 @@
 <template>
   <form @submit.prevent="submitForm" class="uk-form-stacked">
 
+    <button type="button" v-on:click="getFormData()" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ "Update values" }}</button>
+
     <div v-for="(field, index) in schema" :key="index"> 
       <div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>
         <div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand"> 
@@ -68,7 +70,12 @@ export default {
       type: String,
       required: false,
       default: "Submit"
-    }
+    },
+    'selfUpdate': {
+      type: Boolean,
+      required: false,
+      default: false
+    },
   },
 
   data: function () {
@@ -78,7 +85,35 @@ export default {
     }
   },
 
+  created() {
+    this.initialiseFormData()
+  },
+
   methods: {
+
+    initialiseFormData() {
+      /* 
+      This function initialises the form data.
+      Limitations in Vue mean that newly created formData properties are not reactive.
+      GETting formData values from the server creates the properties, but the form components
+      don't get updated because of this limitation.
+      Here, we step through the form schema, and properly create reactive properties for each component.
+      */
+      for (const field of this.schema) {
+        if (Array.isArray(field)) {
+          for (const subfield of field) {
+          console.log(subfield.name)
+          this.$set(this.formData, subfield.name, null)
+          }
+        }
+        else {
+          console.log(field.name)
+          this.$set(this.formData, field.name, null)
+        }
+        
+      }
+    },
+
     updateForm(fieldName, value) {
       this.$set(this.formData, fieldName, value);
       this.$emit('input', this.formData)
@@ -93,6 +128,18 @@ export default {
       }
     },
 
+    getFormData: function() {
+      // Send a quick request
+      axios.get(this.submitApiUri)
+        .then(response => { 
+          console.log(response.data)
+          Object.assign(this.formData, response.data)
+        })
+        .catch(error => {
+          this.modalError(error) // Let mixin handle error
+        })
+    },
+
     newQuickRequest: function(params) {
       console.log(this.submitApiUri)
       console.log(params)

From 8613326822c999ddc28d2b5401dcfe20cab4847e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 12:13:08 +0100
Subject: [PATCH 41/48] Added name prop

---
 src/components/panelLeft.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index cd2263d0..7549ff81 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -49,13 +49,18 @@
           :id="plugin.id" 
           :requireConnection="plugin.requiresConnection" 
           :currentTab="currentTab">
-          <JsonForm  v-for="form in plugin.forms" 
-            :key="form.route" 
-            :route="form.route"
-            :isTask="form.isTask"
-            :submitLabel="form.submitLabel"
-            :selfUpdate="form.selfUpdate"
-            :schema="form.schema"/>
+
+          <div class="uk-flex uk-flex-column">
+            <JsonForm  v-for="form in plugin.forms" 
+              :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()" 
+              :name="form.name"
+              :route="form.route"
+              :isTask="form.isTask"
+              :submitLabel="form.submitLabel"
+              :selfUpdate="form.selfUpdate"
+              :schema="form.schema"/>
+          </div>
+
         </tabContent>
   
       </div>

From cf1e766464ecd817cc331071702e850ba516eb3f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 12:13:22 +0100
Subject: [PATCH 42/48] Added name prop and fixed grid stacking

---
 .../formComponents/JsonForm.vue               | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index bfc56141..1cedc1b4 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -1,33 +1,36 @@
 <template>
-  <form @submit.prevent="submitForm" class="uk-form-stacked">
+  <div>
+    <form @submit.prevent="submitForm" class="uk-form-stacked">
 
-    <button type="button" v-on:click="getFormData()" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ "Update values" }}</button>
+      <button type="button" v-if="selfUpdate" v-on:click="getFormData()" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ "Update values" }}</button>
 
-    <div v-for="(field, index) in schema" :key="index"> 
-      <div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>
-        <div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand"> 
-          <component
-            :is="subfield.fieldType"
-            v-model="formData[subfield.name]"
-            v-bind="subfield">
-          </component>
+      <div v-for="(field, index) in schema" :key="index"> 
+        <div v-if="Array.isArray(field)" class="uk-grid-small uk-width-1-1 uk-child-width-expand" uk-grid>
+          <div v-for="(subfield, subindex) in field" :key="subindex"> 
+            <component
+              :is="subfield.fieldType"
+              v-model="formData[subfield.name]"
+              v-bind="subfield">
+            </component>
+          </div>
         </div>
+        
+        <component
+          :is="field.fieldType"
+          v-model="formData[field.name]"
+          v-bind="field">
+        </component>
       </div>
-      
-      <component
-        :is="field.fieldType"
-        v-model="formData[field.name]"
-        v-bind="field">
-      </component>
-    </div>
 
-    <div class="uk-text-center uk-container" v-if="taskRunning">
-      <div class="center-spinner" uk-spinner></div>
-    </div>
+      <div class="uk-text-center uk-container" v-if="taskRunning">
+        <div class="center-spinner" uk-spinner></div>
+      </div>
 
-    <button v-bind:hidden="taskRunning" type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
+      <button v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
+
+    </form>
+  </div>
 
-  </form>
 </template>
 
 <script>
@@ -53,6 +56,11 @@ export default {
   },
 
   props: {
+    'name': {
+      type: String,
+      required: false,
+      default: "Plugin"
+    },
     'schema': {
       type: Array,
       required: true

From fa848112ca4bd6d413aeea58a29033592a55f5fb Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 12:13:35 +0100
Subject: [PATCH 43/48] Implemented proper checklist logic

---
 .../fieldComponents/checkList.vue             | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue b/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
index 62a832f8..acd26e39 100644
--- a/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
+++ b/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
@@ -5,7 +5,10 @@
     <div class="uk-form-controls">
 
       <div v-for="option in options" :key="option">
-        <label><input class="uk-checkbox" type="checkbox" v-bind:value="option" v-model="computedChecked"> {{ option }}</label>
+        <label>
+          <input class="uk-checkbox" type="checkbox" v-bind:value="option" v-bind:checked="(value && value.includes(option))" @change="updateValue($event.target)"> 
+          {{ option }}
+        </label>
       </div>
 
     </div>
@@ -24,21 +27,23 @@ export default {
     'value'
   ],
 
-  data: function () {
-    return {
-      itemsChecked: this.value || []
-    }
-  },
+  methods: {
+    updateValue(target) {
+      var newSelected = this.value != null ? [...this.value] : []  // Clone value array
 
-  computed: {
-    computedChecked: {
-      get() {
-        return this.itemsChecked
-      },
-      set(val) {
-        this.itemsChecked = val
-        this.$emit('input', this.itemsChecked)
+      if (target.checked) {
+        if (!newSelected.includes(target.value)) {
+          newSelected.push(target.value)
+        }
       }
+      else {
+        if (newSelected.includes(target.value)) {
+          var newSelected = newSelected.filter(function(value, index, arr){
+              return value != target.value;
+          })
+        }
+      }
+      this.$emit('input', newSelected)
     }
   }
 }

From d56a8e369fef6a7cda8a5523b387306617a9d823 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 14:06:10 +0100
Subject: [PATCH 44/48] Fixed form arrangement

---
 src/components/panelLeft.vue                  |  6 ++---
 .../formComponents/JsonForm.vue               | 26 +++++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 7549ff81..8dd9f8c1 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -50,15 +50,15 @@
           :requireConnection="plugin.requiresConnection" 
           :currentTab="currentTab">
 
-          <div class="uk-flex uk-flex-column">
-            <JsonForm  v-for="form in plugin.forms" 
-              :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()" 
+          <div class="uk-flex uk-flex-column" v-for="form in plugin.forms" :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()" >
+            <JsonForm 
               :name="form.name"
               :route="form.route"
               :isTask="form.isTask"
               :submitLabel="form.submitLabel"
               :selfUpdate="form.selfUpdate"
               :schema="form.schema"/>
+            <hr>
           </div>
 
         </tabContent>
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 1cedc1b4..20b3e085 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -1,8 +1,12 @@
 <template>
   <div>
-    <form @submit.prevent="submitForm" class="uk-form-stacked">
 
-      <button type="button" v-if="selfUpdate" v-on:click="getFormData()" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ "Update values" }}</button>
+    <div class="uk-flex">
+      <div class="uk-text-bold uk-text-uppercase uk-width-expand">{{ name }}</div>
+      <a href="#" v-if="selfUpdate" v-on:click="getFormData()" class="uk-icon-link uk-width-auto" uk-icon="refresh"></a>
+    </div>
+
+    <form @submit.prevent="submitForm" class="uk-form-stacked">
 
       <div v-for="(field, index) in schema" :key="index"> 
         <div v-if="Array.isArray(field)" class="uk-grid-small uk-width-1-1 uk-child-width-expand" uk-grid>
@@ -29,6 +33,7 @@
       <button v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
 
     </form>
+
   </div>
 
 </template>
@@ -95,10 +100,13 @@ export default {
 
   created() {
     this.initialiseFormData()
+
+    if (this.selfUpdate) {
+      this.getFormData()
+    }
   },
 
   methods: {
-
     initialiseFormData() {
       /* 
       This function initialises the form data.
@@ -154,8 +162,12 @@ export default {
       // Send a quick request
       axios.post(this.submitApiUri, params)
         .then(response => { 
+          // Do something with the response
           console.log(response)
-          // TODO: Have this perform a GET request to update all available parameters
+          // Update the form data if we're self-updating
+          if (this.selfUpdate) {
+            this.getFormData()
+          }
         })
         .catch(error => {
           this.modalError(error) // Let mixin handle error
@@ -171,7 +183,7 @@ export default {
           return this.$store.dispatch('pollTask', [response.data.id, null, null])
         })
         .then(response => {
-          console.log("Successfully finished task with response:")
+          // Do something with the response
           console.log(response)
         })
         .catch(error => {
@@ -180,6 +192,10 @@ export default {
         .finally(() => {
           console.log("Cleaning up after task.")
           this.taskRunning = false
+          // Update the form data if we're self-updating
+          if (this.selfUpdate) {
+            this.getFormData()
+          }
         })
     },
 

From e9fafd5dce36fefbff95c7234174791a86c7e28e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 16:00:03 +0100
Subject: [PATCH 45/48] Replaced all UIKit icons with MD icons

---
 src/assets/less/theme.less                    | 32 ++++++++++++++++---
 .../controlComponents/paneCapture.vue         | 31 +++++++++++-------
 .../controlComponents/paneConnect.vue         |  8 ++---
 .../formComponents/JsonForm.vue               |  4 +--
 .../galleryComponents/captureCard.vue         |  6 ++--
 .../viewComponents/galleryDisplay.vue         | 10 +++---
 src/main.js                                   |  5 +--
 7 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 7892ae82..32280710 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -198,25 +198,45 @@
 /*
  * Modal
  */
-.uk-modal-dialog {
+.uk-modal-dialoge {
     border-radius: @paper-border-radius;
     box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
     transition: 0.3s ease !important;
 }
 
+/*
+ * Notifications
+ */
+.uk-notification-message {
+    border-radius: @paper-border-radius;
+    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+}
+
+.uk-notification-message-danger {
+    border: 1px solid @notification-message-danger-color
+}
+
+.uk-notification-message-warning {
+    border: 1px solid @notification-message-warning-color
+}
+
+.uk-notification-message-success {
+    border: 1px solid @notification-message-success-color
+}
+
 /*
  * Links
  */
-.uk-link {
+.uk-link, .uk-button-link {
     color: @global-muted-color;
 }
 
-.uk-link:hover, a:hover {
+.uk-link:hover, .uk-button-link:hover, a:hover {
     color: @global-primary-background;
 }
 
 .hook-inverse() {
-    .uk-link:hover, a:hover {
+    .uk-link:hover, .uk-button-link:hover, a:hover {
         color: @inverse-primary-muted-color;
     }
 }
@@ -245,4 +265,8 @@
         background-color: @inverse-primary-muted-color;
         color: #fff;
     }
+}
+
+.uk-icon-button, .uk-icon-button:hover {
+    text-decoration: none
 }
\ No newline at end of file
diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index bebbaafb..8c4bcac1 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -43,18 +43,20 @@
         <div class="uk-accordion-content">
 
           <form @submit.prevent="handleMetadataSubmit">
-            <div class="uk-margin-small uk-grid-small" uk-grid>
-              <div class="uk-margin-remove-top uk-width-2-5"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
-              <div class="uk-margin-remove-top uk-width-2-5"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
-              <div class="uk-margin-remove-top uk-width-1-5"><button class="uk-button uk-button-default uk-form-small uk-float-right" uk-icon="plus"></button></div>
+            <div class="uk-margin-remove uk-flex uk-flex-middle">
+              <div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
+                <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
+                <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
+              </div>
+              
+              <a href="#" v-on:click="handleMetadataSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
+
             </div>
           </form>
 
-          <div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right" uk-grid>
+          <div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
             <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ value }}</div>
-            <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
-              <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon-link" uk-icon="trash"></a>
-            </div>
+            <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
           </div>
 
         </div>
@@ -65,9 +67,16 @@
         <div class="uk-accordion-content">
 
           <form @submit.prevent="handleTagSubmit">
-            <div class="uk-margin-small uk-grid-small" uk-grid>
-              <div class="uk-margin-remove-top uk-width-4-5"><input v-model="newTag" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Tag"></div>
-              <div class="uk-margin-remove-top uk-width-1-5"><button class="uk-button uk-button-default uk-form-small uk-float-right" uk-icon="plus"></button></div>
+            <div class="uk-margin-small uk-flex uk-flex-middle">
+
+              <div class="uk-margin-remove-top uk-width-expand">
+                <div class="uk-inline uk-width-1-1">
+                  <span class="uk-form-icon"><i class="material-icons">label</i></span>
+                  <input v-model="newTag" class="uk-input uk-form-small" type="text" name="flavor" placeholder="Tag">
+                </div>
+              </div>
+
+              <a href="#" v-on:click="handleTagSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
             </div>
           </form>
 
diff --git a/src/components/controlComponents/paneConnect.vue b/src/components/controlComponents/paneConnect.vue
index efb02fa9..9eb1e0ca 100644
--- a/src/components/controlComponents/paneConnect.vue
+++ b/src/components/controlComponents/paneConnect.vue
@@ -10,7 +10,7 @@
 
       <div v-if="!localMode">
         <div class="uk-inline uk-width-1-1">
-          <span class="uk-form-icon" uk-icon="icon: server"></span>
+          <span class="uk-form-icon"><i class="material-icons">dns</i></span>
           <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
         </div>
       </div>
@@ -44,9 +44,9 @@
           <a class="uk-accordion-title" href="#">Saved hosts</a>
           <div class="uk-accordion-content">
             <button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
-            <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
-              <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto host-delete" uk-icon="trash"></a> 
+            <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
+              <a href="#" v-on:click="autofillHost(host)" class="uk-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
+              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a> 
             </div>
           </div>
         </li>
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 20b3e085..3f3e3fff 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -3,7 +3,7 @@
 
     <div class="uk-flex">
       <div class="uk-text-bold uk-text-uppercase uk-width-expand">{{ name }}</div>
-      <a href="#" v-if="selfUpdate" v-on:click="getFormData()" class="uk-icon-link uk-width-auto" uk-icon="refresh"></a>
+      <a href="#" v-if="selfUpdate" v-on:click="getFormData()" class="uk-icon uk-width-auto"><i class="material-icons">cached</i></a>
     </div>
 
     <form @submit.prevent="submitForm" class="uk-form-stacked">
@@ -26,7 +26,7 @@
         </component>
       </div>
 
-      <div class="uk-text-center uk-container" v-if="taskRunning">
+      <div class="uk-text-center uk-container uk-margin-small" v-if="taskRunning">
         <div class="center-spinner" uk-spinner></div>
       </div>
 
diff --git a/src/components/viewComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
index 1fa77043..041d1fc5 100644
--- a/src/components/viewComponents/galleryComponents/captureCard.vue
+++ b/src/components/viewComponents/galleryComponents/captureCard.vue
@@ -13,7 +13,9 @@
       <div class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right" uk-grid>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">{{ metadata.filename }}</div>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
-          <a href="#" v-on:click="delCaptureConfirm()" class="uk-icon-link" uk-icon="trash"></a>
+          <a href="#" v-on:click="delCaptureConfirm()" class="uk-icon">
+            <i class="material-icons">delete</i>
+          </a>
         </div>
       </div>
 
@@ -59,7 +61,7 @@
       <form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" @submit.prevent="handleTagSubmit">
 
           <div class="uk-inline">
-            <span class="uk-form-icon" uk-icon="icon: tag"></span>
+            <span class="uk-form-icon"><i class="material-icons">label</i></span>
             <input v-model="newtag" class="uk-input uk-form-width-medium uk-form-small" type="text" name="tagname" placeholder="tag">
 
             <button class="uk-button uk-button-default uk-margin-left uk-form-small uk-modal-close" type="button">Cancel</button>
diff --git a/src/components/viewComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
index cf8c2a87..38800cb8 100644
--- a/src/components/viewComponents/galleryDisplay.vue
+++ b/src/components/viewComponents/galleryDisplay.vue
@@ -4,8 +4,8 @@
     <nav class="uk-navbar-container uk-navbar-transparent navbar" uk-navbar="mode: click">
         <div class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom">
             <ul class="uk-navbar-nav">
-              <li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
-              <li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
+              <li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon" href="#"><i class="material-icons">keyboard_arrow_down</i></a></li>
+              <li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon" href="#"><i class="material-icons">keyboard_arrow_up</i></a></li>
               <li>
                 <a href="#">Filter</a>
                 <div class="uk-navbar-dropdown" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }">
@@ -25,9 +25,9 @@
 
     <div v-if="$store.getters.ready" class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
 
-      <div v-if="(galleryFolder)" class="uk-padding uk-padding-remove-right uk-padding-remove-bottom">
-        <a href="#" v-on:click="galleryFolder=''" class="uk-icon-button" uk-icon="arrow-left"></a> 
-        <h3 class="uk-inline uk-float-right uk-margin-remove"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
+      <div v-if="(galleryFolder)" class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
+        <a href="#" v-on:click="galleryFolder=''" class="uk-icon uk-margin-remove"><i class="material-icons">arrow_back</i></a>
+        <h3 class="uk-margin-remove"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
       </div>
 
       <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
diff --git a/src/main.js b/src/main.js
index 71ffe558..a4e4129b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,6 @@ import App from './App.vue'
 import store from './store'
 
 import UIkit from 'uikit';
-// Import UIkit icon set
-import Icons from 'uikit/dist/js/uikit-icons';
-UIkit.use(Icons);
 
 // Import MD icons
 import 'material-design-icons/iconfont/material-icons.css'
@@ -81,7 +78,7 @@ Vue.mixin({
         console.log(errormsg)
       }
       this.$store.commit('setError', errormsg);
-      UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${errormsg}`, status: 'danger'})
+      UIkit.notification({message: `${errormsg}`, status: 'danger'})
     },
 
     getLocalStorageObj: function(keyName) {

From 3de9927cd2e62935ae2114041b0574052e6ab1e9 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 17:00:26 +0100
Subject: [PATCH 46/48] Added a proper indeterminate progress bar

---
 .../controlComponents/paneNavigate.vue        |  10 +-
 .../settingsComponents/cameraSettings.vue     |  10 +-
 .../genericComponents/progressBar.vue         | 142 ++++++++++++++++++
 .../formComponents/JsonForm.vue               |   9 +-
 4 files changed, 164 insertions(+), 7 deletions(-)
 create mode 100644 src/components/genericComponents/progressBar.vue

diff --git a/src/components/controlComponents/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue
index 1adb59a0..11d1314a 100644
--- a/src/components/controlComponents/paneNavigate.vue
+++ b/src/components/controlComponents/paneNavigate.vue
@@ -66,9 +66,10 @@
       <a class="uk-accordion-title" href="#">Autofocus</a>
       <div class="uk-accordion-content">
 
-        <div class="uk-text-center uk-container" v-if="isAutofocusing">
-          <div class="center-spinner" uk-spinner></div>
+        <div v-if="isAutofocusing">
+          <progressBar/>
         </div>
+
         <div class="uk-grid-small uk-child-width-1-3" v-bind:hidden="isAutofocusing" uk-grid>
           <div>
             <button v-on:click="runFastAutofocus(2000, 300);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fast</button>
@@ -90,6 +91,7 @@
 
 <script>
 import axios from 'axios'
+import progressBar from "../genericComponents/progressBar"
 
 // Key Codes
 const keyCodes = {
@@ -107,6 +109,10 @@ const keyCodes = {
 export default {
   name: 'paneNavigate',
 
+  components: {
+    progressBar
+  },
+
   data: function () {
     return {
       keysDown: {},
diff --git a/src/components/controlComponents/settingsComponents/cameraSettings.vue b/src/components/controlComponents/settingsComponents/cameraSettings.vue
index 86c5ff5e..b8127113 100644
--- a/src/components/controlComponents/settingsComponents/cameraSettings.vue
+++ b/src/components/controlComponents/settingsComponents/cameraSettings.vue
@@ -24,9 +24,10 @@
 
     <button type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Apply Settings</button>
     
-    <div class="uk-text-center uk-container" v-if="isCalibrating">
-      <div class="center-spinner" uk-spinner></div>
+    <div v-if="isCalibrating">
+      <progressBar/>
     </div>
+
     <div v-bind:hidden="isCalibrating">
       <button type="button" v-on:click="recalibrateConfirm()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
     </div>
@@ -40,11 +41,16 @@
 
 <script>
 import axios from 'axios'
+import progressBar from "../../genericComponents/progressBar"
 
 // Export main app
 export default {
   name: 'microscopeSettings',
 
+  components: {
+    progressBar
+  },
+
   data: function () {
     return {
       shutterSpeed: this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed,
diff --git a/src/components/genericComponents/progressBar.vue b/src/components/genericComponents/progressBar.vue
new file mode 100644
index 00000000..6cd3e95d
--- /dev/null
+++ b/src/components/genericComponents/progressBar.vue
@@ -0,0 +1,142 @@
+<template>
+<div class="progress uk-margin-top uk-margin-horizontal-remove uk-padding-remove">
+  <div class="indeterminate"></div>
+</div>
+</template>
+
+<script>
+
+export default {
+  name: 'progressBar',
+
+  props: {},
+
+  methods: {
+    setThisTab(event, value) {
+      this.$emit('set-tab', event, this.id);
+    }
+  },
+
+  computed: {
+    tooltipOptions: function () {
+      var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
+      return `pos: right; title: ${title}; delay: 500`
+    },
+
+    classObject: function () {
+      return {
+        'tabicon-active': this.currentTab == this.id,
+        'uk-disabled': (this.requireConnection && !this.$store.getters.ready)
+      }
+    }
+
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+.progress {
+  position: relative;
+  height: 5px;
+  display: block;
+  width: 100%;
+  background-color: rgba(180, 180, 180, 0.15);
+  border-radius: 2px;
+  background-clip: padding-box;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden; 
+}
+
+.progress .determinate {
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  bottom: 0;
+  transition: width .3s linear; 
+}
+
+.progress .indeterminate, .progress .determinate {
+  background-color: @global-primary-background; 
+}
+
+.hook-inverse() {
+    .progress .indeterminate, .progress .determinate{
+        background-color: @inverse-primary-muted-color;
+    }
+}
+
+.progress .indeterminate:before {
+  content: '';
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 
+}
+
+.progress .indeterminate:after {
+  content: '';
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+          animation-delay: 1.15s; 
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 3f3e3fff..afc4ebf3 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -26,8 +26,8 @@
         </component>
       </div>
 
-      <div class="uk-text-center uk-container uk-margin-small" v-if="taskRunning">
-        <div class="center-spinner" uk-spinner></div>
+      <div v-if="taskRunning">
+        <progressBar/>
       </div>
 
       <button v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">{{ submitLabel }}</button>
@@ -48,6 +48,8 @@ import htmlBlock from "./fieldComponents/htmlBlock";
 import radioList from "./fieldComponents/radioList";
 import checkList from "./fieldComponents/checkList"
 
+import progressBar from "../../genericComponents/progressBar"
+
 export default {
   name: 'JsonForm',
 
@@ -57,7 +59,8 @@ export default {
     textInput,
     htmlBlock,
     radioList,
-    checkList
+    checkList,
+    progressBar
   },
 
   props: {

From 2c9f844afdf5b5d98db7172b87c6cab7cd9632e0 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 17:14:01 +0100
Subject: [PATCH 47/48] Fixed scan folder name padding

---
 src/components/viewComponents/galleryDisplay.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/viewComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
index 38800cb8..9eac6205 100644
--- a/src/components/viewComponents/galleryDisplay.vue
+++ b/src/components/viewComponents/galleryDisplay.vue
@@ -27,7 +27,9 @@
 
       <div v-if="(galleryFolder)" class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
         <a href="#" v-on:click="galleryFolder=''" class="uk-icon uk-margin-remove"><i class="material-icons">arrow_back</i></a>
-        <h3 class="uk-margin-remove"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
+        <div class="uk-margin-left">
+          <h3 class="uk-margin-remove uk-margin-left"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
+        </div>
       </div>
 
       <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>

From 1f314e34f67435c19aab38260c7e65217792251f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 17:15:28 +0100
Subject: [PATCH 48/48] Iterated to beta 4

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

diff --git a/package.json b/package.json
index 6890d8c4..d20e99c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.4",
   "private": true,
   "description": "An electron-based user client for the OpenFlexure Microscope Server",
   "author": "OpenFlexure <contact@openflexure.org> (https://www.openflexure.org)",