From ab3c7756cab29e5d5aea6386c01b7ef0f6589c34 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 29 May 2019 09:53:00 +0100
Subject: [PATCH 01/90] Only generate choco for deterministic tag URLs

---
 .gitlab-ci.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 6a571865..8c018f33 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -74,6 +74,4 @@ meta:choco:
       - tools/chocolateyInstall.ps1
       - ./*.nupkg
   only:
-    - stable
     - tags
-    - web

From 61e5860a081d434114205e3a1d215aaf577eef91 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 29 May 2019 09:53:07 +0100
Subject: [PATCH 02/90] Update to new CI format

---
 app/make-nupkg.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/make-nupkg.sh b/app/make-nupkg.sh
index 5c01e136..f52ec90c 100644
--- a/app/make-nupkg.sh
+++ b/app/make-nupkg.sh
@@ -41,7 +41,7 @@ echo "Nupkg version: $version"
 
 # Build installer URL
 pipelineURL="$CI_PROJECT_URL/-/jobs/artifacts/$CI_COMMIT_REF_NAME/raw"
-instURL="$pipelineURL/openflexure-ev-win.exe?job=package:win32"
+instURL="$pipelineURL/openflexure-ev-win.exe?job=package"
 nuspecURL="$CI_JOB_URL/artifacts/browse"
 
 echo "$instURL"

From 4bdf940bdd6e915df02bf0d6797b94f43aac37ec Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 21:15:02 +0100
Subject: [PATCH 03/90] Separate web and app targets

---
 .env.production.app | 3 +++
 .env.production.web | 3 +++
 package.json        | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .env.production.app
 create mode 100644 .env.production.web

diff --git a/.env.production.app b/.env.production.app
new file mode 100644
index 00000000..f9fd3136
--- /dev/null
+++ b/.env.production.app
@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_PLATFORM=web
+VUE_APP_TARGET=electron-renderer
\ No newline at end of file
diff --git a/.env.production.web b/.env.production.web
new file mode 100644
index 00000000..e9a62687
--- /dev/null
+++ b/.env.production.web
@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_PLATFORM=web
+VUE_APP_TARGET=web
\ No newline at end of file
diff --git a/package.json b/package.json
index 964ee06a..f1feb62f 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "dist:win": "electron-builder --win --config app/builder-config-x86_64.yaml",
     "dist:dmg": "electron-builder --mac --config app/builder-config-x86_64.yaml",
     "dist:appx": "electron-builder --win --config app/builder-config-appx.yaml",
-    "build": "vue-cli-service build",
+    "build:web": "vue-cli-service build --mode production.web",
+    "build:app": "vue-cli-service build --mode production.app",
     "electron:run": "electron .",
     "electron:dev": "electron app/app.dev.js",
     "serve": "vue-cli-service serve"

From adfec0bbfe6744e9345dfe82677d1e3ece095dd2 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 21:15:15 +0100
Subject: [PATCH 04/90] JS file for electron-renderer specific code

---
 src/main.app.js | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/main.app.js

diff --git a/src/main.app.js b/src/main.app.js
new file mode 100644
index 00000000..a7b44007
--- /dev/null
+++ b/src/main.app.js
@@ -0,0 +1,7 @@
+//import { Titlebar, Color } from 'custom-electron-titlebar'
+
+//new Titlebar({
+//    backgroundColor: Color.fromHex('#ffffff')
+//});
+
+console.log("Loaded main.app.js for electron-renderer functionality")
\ No newline at end of file

From 396adca35f1022bd30fd9639e6ccedfa393e7146 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 21:15:32 +0100
Subject: [PATCH 05/90] Separate app and web builds

---
 vue.config.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/vue.config.js b/vue.config.js
index ad3386d1..1cf8436d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,15 @@
 module.exports = {
+  configureWebpack: config => {
+    config.target = process.env.VUE_APP_TARGET || 'web',
+    config.entry = (process.env.VUE_APP_TARGET == 'electron-renderer') 
+    ? {
+      main: './src/main.js',
+      app: './src/main.app.js'
+    }
+    :{
+      main: './src/main.js',
+    }
+  },
+  outputDir: (process.env.VUE_APP_TARGET == 'electron-renderer') ? './app/dist' : './dist',
   publicPath: ''
 }
\ No newline at end of file

From 814df5f27a2a32595c981091994bc1db53c3a3dd Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 21:15:41 +0100
Subject: [PATCH 06/90] Update electron app source directory

---
 app/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/app.js b/app/app.js
index d1fe5162..48316176 100644
--- a/app/app.js
+++ b/app/app.js
@@ -70,7 +70,7 @@ const app = electron.app
 const BrowserWindow = electron.BrowserWindow
 
 // Set the window content
-let url = `file://${path.join(__dirname, '../dist/index.html')}`
+let url = `file://${path.join(__dirname, '/dist/index.html')}`
 let mainWindow
 
 // Set the application menu

From a154c9dd15d028388f8e5acc31df41474444d15f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 21:21:48 +0100
Subject: [PATCH 07/90] Ignore app dist folder

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index afc1c793..be92d222 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/app/dist
 /release-builds
 /installers/release-builds
 

From f1d30471096a5b043ba345e06a986a6132814ea5 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 21:21:59 +0100
Subject: [PATCH 08/90] Draft updated CI

---
 .gitlab-ci.yml | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 8c018f33..3dd719a1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -15,7 +15,7 @@ build:
   image: electronuserland/builder:wine
   script:
     - npm install
-    - npm run build
+    - npm run build:web
   artifacts:
     name: "build"
     paths:
@@ -25,11 +25,27 @@ build:
     - tags
     - web
 
+# Build electron webapp
+build:electron:
+  stage: build
+  image: electronuserland/builder:wine
+  script:
+    - npm install
+    - npm run build:app
+  artifacts:
+    name: "build"
+    paths:
+      - app/dist/
+  only:
+    - stable
+    - tags
+    - web
+
 # Platform-specific Electron builds
 package:
   stage: package
   dependencies:
-    - build
+    - build:electron
   image: electronuserland/builder:wine
   retry: 2
   script:

From 793c8e2c7edf44966b3925968933b2bc1d804a60 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 2 Jun 2019 22:03:49 +0100
Subject: [PATCH 09/90] Condensed build:app into package

---
 .gitlab-ci.yml | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 3dd719a1..9a3f8a91 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,6 +1,5 @@
 stages:
   - build
-  - package
   - meta
 
 # Cache modules in between jobs
@@ -9,7 +8,7 @@ cache:
   paths:
   - node_modules/
 
-# Build basic webapp
+# Basic webapp build
 build:
   stage: build
   image: electronuserland/builder:wine
@@ -25,30 +24,13 @@ build:
     - tags
     - web
 
-# Build electron webapp
-build:electron:
+# Electron app build
+package:
   stage: build
   image: electronuserland/builder:wine
   script:
     - npm install
     - npm run build:app
-  artifacts:
-    name: "build"
-    paths:
-      - app/dist/
-  only:
-    - stable
-    - tags
-    - web
-
-# Platform-specific Electron builds
-package:
-  stage: package
-  dependencies:
-    - build:electron
-  image: electronuserland/builder:wine
-  retry: 2
-  script:
     - npm run release
     - mv ./release-builds/*.AppImage .
     - mv ./release-builds/*.deb .

From 7e1275840032ad79d4789028c4548ed21788cd39 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 10:23:45 +0100
Subject: [PATCH 10/90] Added CET dependency

---
 package-lock.json | 7 ++++++-
 package.json      | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ded0d3f8..5a00b113 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3643,6 +3643,11 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "custom-electron-titlebar": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/custom-electron-titlebar/-/custom-electron-titlebar-3.0.8.tgz",
+      "integrity": "sha512-VFyV3y5DVcVhGXx1yo16gwNFusbivGQUGTf7ANBA2Hho2tsWvxoVc03rJ908qWqy/yPA0++qSw7AJqjaHimwRA=="
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
diff --git a/package.json b/package.json
index f1feb62f..c0ba0e17 100644
--- a/package.json
+++ b/package.json
@@ -19,12 +19,13 @@
     "dist:appx": "electron-builder --win --config app/builder-config-appx.yaml",
     "build:web": "vue-cli-service build --mode production.web",
     "build:app": "vue-cli-service build --mode production.app",
-    "electron:run": "electron .",
+    "electron:run": "npm run build:app && electron app/app.js",
     "electron:dev": "electron app/app.dev.js",
-    "serve": "vue-cli-service serve"
+    "serve:web": "vue-cli-service serve"
   },
   "dependencies": {
     "about-window": "^1.12.1",
+    "custom-electron-titlebar": "^3.0.8",
     "electron-context-menu": "^0.11.0",
     "electron-updater": "^4.0.6"
   },

From 3826bdb51141bf1aaa755dde4bab20e065723d81 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 10:23:58 +0100
Subject: [PATCH 11/90] Lock tab tooltips to bottom alignment

---
 src/components/panelDisplay.vue |  4 ++--
 src/components/panelLeft.vue    | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/panelDisplay.vue b/src/components/panelDisplay.vue
index 66b705af..f07c2efe 100644
--- a/src/components/panelDisplay.vue
+++ b/src/components/panelDisplay.vue
@@ -1,8 +1,8 @@
 <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="Live"></a></li>
-      <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></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-flex uk-flex-1">
       <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 9cb3b72f..6997d46b 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -1,11 +1,11 @@
 <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="Connect"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
-      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Settings"></a></li>
+      <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>

From 1baf040b8958bbb759b06c79422d5d39c0012d91 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 10:24:15 +0100
Subject: [PATCH 12/90] Show custom titlebar on Win and Linux

---
 src/main.app.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/main.app.js b/src/main.app.js
index a7b44007..aff30501 100644
--- a/src/main.app.js
+++ b/src/main.app.js
@@ -1,7 +1,10 @@
-//import { Titlebar, Color } from 'custom-electron-titlebar'
+import { Titlebar, Color } from 'custom-electron-titlebar'
 
-//new Titlebar({
-//    backgroundColor: Color.fromHex('#ffffff')
-//});
+// Only show custom menubar for Windows or Linux
+if ((process.platform !== 'darwin')) {
+    new Titlebar({
+        backgroundColor: Color.fromHex('#c5247f')
+    });
+}
 
 console.log("Loaded main.app.js for electron-renderer functionality")
\ No newline at end of file

From b0687426dd9b21c32565a16c9c16452820cf8b12 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 10:24:24 +0100
Subject: [PATCH 13/90] Hide frame on Win and Linux

---
 app/app.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/app.js b/app/app.js
index 48316176..066ae2d2 100644
--- a/app/app.js
+++ b/app/app.js
@@ -79,6 +79,7 @@ require('./menu.js')
 function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
+    frame: (process.platform !== 'darwin') ? false : true,
     width: 1124, 
     height: 800,
     icon: path.join(__dirname, '/icons/png/64x64.png')

From 73b5011feaad948d1c23a4331aea7dcab468c26f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 13:37:54 +0100
Subject: [PATCH 14/90] Removed old Vue icon asset

---
 src/assets/images/logo.png | Bin 6849 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/assets/images/logo.png

diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6849
zcmeAS@N?(olHy`uVBq!ia0y~yU^oH79Bd2>3~M9S&0}C-kSuYHC<)F_D=AMbN@Z|N
z$xljE@XSq2PYp^<OsOn9nQFtpz^t4Z5>XQ2>tmIipR1P$QlnRqTfhJUHue<-iOJci
zB??KY>6v-9O7C~?S5nAKu~iB;^)>J<a8Aw0^r$LI4X*MFNv_IHwoFm7w^OjGu&T%{
z$W1LtRH(?!$t$+1uvG$^Yn4}Q1rpX*QUEI{$+lI3I4Z(7K*2e`C{@8!&rCPjz|cg&
z+)~fb)Xdz{Tt~skz|chBz(U{1K-a+1%GB7(z(@fKl<X92ic-?7f?V97b`_<h*(zm}
zloVL$>z9|8>y;bp<rk&v8(Lag>Khp88yV>qrKIT=SLT%@R_NvxE5l51Ni9w;$}A|!
z%+FH*nV6WAUs__Tqy#m#BDcWT7jAG~F*Kl(^K<np5)1SV^$hfLb3y(Bd$_nHC>7xh
ztg4GcDhpEegHnt0ON)|IgHqF!k*vaR5lCTyudkI$esXDUYF>$_i>*>cZh>A(W{Q=i
zrJ0kHg`1<fnW34Xp{uE*g^8<$o0FlLiKU^Lk&6XPuV-FyNn&1dDok%CLa!xWy;jae
zsfi`|MIrh5Ik4CZ$jC3rFV4s>P;hou(C|%6&ddYxH9=tu4mc~9)S}F?)D*X({9FZa
z;8<m1ae$ernWLeRxuv<8rIDebtFfh_g{6gyrGb;1g|n-PxtS7FZweNVL-ji1)T?i&
zV51L;S)`bT2?e>hftcV#2}+=L3W$`SnwMg$RHS5Y7be%E#lRqL;_2cTQgQ1|Y<5rV
z)zY}<rSJFH&XeSS8q3bL!$#)j!&DB&<w12%{FnTBG5=r2l?NM>@3c&cC{pC(<X04b
zxTPhaLsq0^1$QTl*2GLl4#Ay`%O-HJWFGNmORhf9m;Pqw=N;c|cI~VEHdkWC#^;6a
zZC~HnZMWsfk9)=EBh%mho%`3~_wCc3lUhW$j-DwnW#MWSa#<MAq#@!Z(CWmwC_uwe
zgiE!<X(3CX#uNpJBvfc)#*gg(pTDvH{QrEz(MdAJOzj$lE52MV*Sr(0RPK4;|G670
zJ7hn^YOQ<mw>s-{oxh^fGY<VnSJG$og!%lfdlKJsKJJ*^=ckV^a<QhD2OYmYE%?!<
ze$m42G}~?4Yi@U~5e;9H=#;nJ|6t`^k$tw)E}6gH^}=e(6y+|rQ?vhW-nDPqjbG|g
zea?Od7k_wgB<<VZ^)m4e%NbKoK7Cz$(`v4q>T#{0#ozfBeJ%Z?c+QkB$woBr;jGjr
zpC_xi32avDm>gBH;LG-tE)@%#)eFz?c(zFWW|M!YU9;}j{L0q{Q#*}ZZ!YRd{Tlnv
zg|A@oFAK>@-=8GU?m7AL+lq?23YMO~uAIE1TgRmSSg`ed|KBTxt=~7?F#o|3|8R51
zwdT_o5}jrkJ>BFg$=&<#!pG(>={M(1j5zR-<9leh-ogiu;@)ka=E`zebC(F8e~egf
z*uGa=elL?&zW6}8re*zyNSDeY$zL(kG=itB4Ji6E{ppe8X&c*IcAfH{(=xmN(bm%^
zUUF#66uKa{JM+3$&HgXRT}j79Hf>lp^<!tPvE8HldEZP0Q`?PlcIQbxi+B0Lk#_Lc
z%SCqY4wv8D=AGj@X|ZDE^Rl3iU3LGWj|H<c-+$3Rx%uLUBWwHek1K86u!5~^BfBuu
zzJu;Rv=+-~hwRyNf6CG+MRORxN9Zldi~s&5_jr9|iga4EQtmRL&9Ww97jN|6U-lzo
z<{Uly&yq`)$V|TdP_?!Dx1Z{LX}{&QoBKssB`RE&Pl^BixUs^fXin2?TgzikMbkxA
zWFNM4iIr1b>Y?P=w~2R?@7XI&6aGG$trRWDx57AL!6We<mB$YFImEgg?e1&!D=Bys
zfA@gr?tfD@7Iq#I|G{$KNWFdTM3<SO_WRFFSr|~nFuPCvxDN|s-LY@0PB2=RZ{?c)
zJ+L6Izw)BWqSZ(JUl-KB)VBGt=aRrqp<to3l&L$c1ojEp9W<9@{@hhLzjc$dB$q1t
zt3QY5OXZy_`d~G2djn(DY;RY&Cky+1r@omj*kf<-W6hrUTPJPny*}JKc=AL+?ze+K
znix0gFHkFzT)3v|deQl%cYRL>sI8k{XqPsvIX>z4&J$rNOML#h+KQ}+(poO+82<Xg
zk*+5hKVRo9&yPE|u*mGnk6Am+et#(c;OcUH)vc<6$e-fhXKWI_Rb_MToBd}+jt{&(
zB3-+ucKDPtUEU}0MOAoWhpL8zO!&8{+k!2%X4ShCCi7l@lD(P#e-7KLyl=192AF9m
zPZ2%klaRZ~w9D*V)E4z058ZR_i(4kxi%lvoV;5Z~Ww2RU=$f;oYyTtV;8+`reYZ0|
zTW-p82AT6;`1b|Qc$G8D7Ul%FX=qQGdEwgQu;}a0eFYwrZDW3v$9Yh{HDu4K`G1V9
zHRXhbYTi8y`PP4bf{)vL&kZW7rCa~CWq&mNd26;&{L1LJQH3)XfQ?z$Z56ovy+z{l
z2TwvLnswy3ZrHZM+~D%Qw3Q_)33J09%sM6TPWpBy`|g*&T1wx9-7J0_wL@*4ZqhR?
zuj%U-LyTB^oXv`}^tsSk^_$;1WH$7-iPYq2vTC#V{uYZZDP8w;-MQ&^n$pt>WS09K
zdw$IH(ZrSd4`&r!iw^af$+CL-EF&SWKHF`1my<Y|PR#js)SCTWp7?dXSxe<BHqW(O
zAep%T5c6Yu#q+*Ly(A2-AO7>@&%=Ko+0R-FaK2u<gC{^N_d0Ko(1ebaKaO5`xl`x~
z?>1Sb-BEwGd^-Pr(V?Zao1!Kjo}BI`?_0Bc+3PKKi5BHw9v&%Q<UBduGs`wW>>g|E
zloPRQe+x%1&vp}d;I@skaC=uOPw>Q-@2i+|Up53B+M;hQxX-@KT}W-O--D&z7qYJw
zEvP>F{K(G2-j~Jce>Xh3v6$yf(SjnKP!7{`-}sC5PF2pS=*iuDB5aAs#Of&Nt+BQf
z_KBaY+A}ZYdgj#T7Y}~yZCPF&8WYNWcxOSKo%y=NI4-Uo=||*J8#Z|yJJM%sc6(P$
zaT9}mQg!ehUG<ec#u1m@4}Qw)TB_4|{KtdlOZQdWPiyzuTt8!{TV`23=Tye=Q_~;Z
zQ3`2Fn=4aZYWYorS-F3j<=XCD)%W*UF@Kf1W3sEE$7cI!^VeHe&1UjY@Gz2`sTpzH
z=5O|aDD_y=GqJ1N3-UaTqBs`z@HnpPDZ5u%u6VI_Uha06Ne+izu8(nQo!azd=bgWt
z_H$xnd&B<S%H+Sav1z-*;VFjmnV&x@UN>p;y;VL3RrjiWYf9a+JNNEdYsZGKO3n<G
zdjH#b8DmZqtFxXg{yz1c_o5TcH5L!o1qq$MyeOoqr}#lkQp%Q$oz~38SNm=}cXYeW
z(X{9IHs2==wI(X>=lE&G+|*BAtuSla^KZx5)$1Nq>6N?h@D@6I`G@%r-E)n_o)a%B
z9h=~!{H*iN^rqW6b8{se8{Th{ooJEZf6Q4c&e-AKN++?CH$S?k#=n%G>{T=?@=Qc+
zr-k_EOGi6?=$<pwjXm=#vE^%+%;Q7P*?rEm@|_8E&yOr%PY@J;=4W?TVUuX1&G!8V
zR3fLnYf^HV*ZrO4;)fs2Y0;tSa;F7<M*LyhZ~A(z%E=7NWA7R=Bz0e9sB$+k^l$nb
z_M}1f)1A}Pf(rJ{DUG_}qxfgRm!}z9YPLp(ScKPo*!Y9D&U;eI7MbWH7Snc5`70Xj
zuBqL`aJ`#{_udn+xh1!*3#*(@-M^@I>D<dveUoz;()$nRpRrPBG>TgD`_OI);po1N
z36gIY#d}_9QqbT0R_JC|!rW`EwjnWh)zd;(-kkbzap&hnhbO=G|HZcFm)pM&PXy|e
z)Ax#QKeu}NtQ%dKbM1TUH<ub0H|gw}A8szAfBvoRi3_S0mtSvrx3K6+ol|9=*5cgf
z$=jDpzvYU^KWg};iaSl1?VwTAm7~5}Edtka6wSz8eS*>Yd;eYI+bcOL*9oLbN45U&
z*l8;@Z^!XBZ(lDn4wW}Pk+E^Rp1g4Xl-sTx3;TkLs$_x>8r@pE&96(5qd@$&UExBb
zTQ9gouYH+ZAGUl(x$=?Z&JPEE{7O;!!yWR^f30VW)x`aW4bym3RdO4T8|ti)Tu|Zj
zrfPNVHoZwEO$?vzZJ2%6v?Ac<>*dwPtt!s*y2Ds5@B8hQDb>2F<=Ux?kCOYkm-@U`
zN|V`b)~A@%IfE<LHY<ufTlQ!Cro9TK2jtegTl(OTsuA0?lO<BEs~0N=$E#^5Ep$8b
zNpMf)^Yb6(O3qL>dKCWP2J7l7RsJ*a8%hIo92pjVy3?X9zjU{en5|)^h`|Nk@BQ{4
zPHunx;|x#J(j~eNW{6JMc0jrFC(G-w@2?yu*l)P2ziD;o)aP+(n!QakkJ;Kv$=!eC
zP;sJd|HqkAuI@Ua*fB$~tn<#b$92))j|j8;FpKt#;W+z=L;HNJn#;WGc#gLB)9V8M
zp7`^YW9GG|5<5dB-!8dP)1(^xTtlCw@!fZ|iEB?pxV)P$>dWM5d|`^w+v+uM+U5Q3
z@gBaf6xFXX_kqJLrXxHXg>O~eNqHUf_VhDh&XTO&|H;<zF%~;NCC0D($bNt6se6V+
z)vQkv+V>sayrd&ZaJGR2<E@*qS4_9eN%|2kcC%(dbgARrw$9SBxMx<nJXY4ZQmm7&
zM>-tz&%Tx{w6Rv>ILpSyo@rK}rf*ZwXZb05yWZnX*38nV>0bgq+>EOWYExQPyL|iC
zi3V#=8*+wyn<c?H?^^AtYa8zfvD{EF+7eNE=x&?Yn#-@YeTq40d0yJm?{UPAGG?A5
zC-%fl?c9}~mdD~~m#{lH#ns{4o%1CUm3d0#t7jeKKQpnn>@34inb|IRr%bM_{Cn0x
z;6ZgxyGmGFh0UTzSDBy8y{1^XdGj$_6AQL`FaKP4Fhjx2NnWZwXYQgjMGmRVgP-mw
zoNZDm-+ktof}i<(H=Q|+4x4()lucJWzJB85xBB$o@e`TLP83gcd&qQ=`BIxti~?In
z>w_(<`xC3z1d3;WxvjDD)19W|Z<mcW-SB#Cs_f?Wdby#4PRqW}3{tzUt-r|fQ}(uU
z(ENG-;>&^^C)jM?_+5ThwL1^X_C@_StgdWfVN__<>E^Eevi#q6b=P^fR}@Bsx<&g&
zD+IemFOxc%u~ayv<!#zT(NrCk?>%M4t5q#Nru6;}3v=t<!aCvNsktY2-@G<=nL0;-
z`R%yQsjQnWF>QK2@2;v^uT!nM#-*=eJJJst-P*hDT)=7p76HxkrkNsDYiz<jq*`||
zes6nw*kJAH?>@Rpi_da9&P%KIdlFo_Bx%Xg*6t@u0#}?ruqWr;#S<A%m+4lVyEb*2
zGKWI&ylxY&yh(PEx0xkB-HH0HwsFzUyZaPMUAIqhj*PR(ZrXFUZ2bww-x;lYK3lD<
zsEq&I>ngMRUe|lx?-~(q-Mc=9X$!MB1RYI&)U{0O{N6OlpUqBBc5YQ--*oYl?aaIH
zpPtI-pV+WuqY#IYXJ%JsrD&#((sPm7Zi$OLuVo$$b36ULrCL~L@!pHqdZ(##Y?%DE
zbRu))n#;Qu^*0so{(S%Hrpvo_On=Z-SDf$k{&{J%x(BCH?SVeVs@?8Kx1PQf>-Nd!
zE%*JoCb^B5@9i?WwMXd5{+sgzeqNE)om?NtFKV}Y%A<*M{C>}R`Fhh%_WzIMPF}vg
zf_Z;f(;1!<#ZPS)t+lznB=Cji6aRV9Q!kc@U&@T#X>@Bwi|3Z5f=?7~=PGGSe82wp
zsccBhWarAfN$>hHE{XlAY=5$ab^A@L1uT|~`_7x`Y@C$1ywoFbuW^yedDrV)H#5$A
zq;64@UVCQY@eN1X7rQhq_+i$S<9bZFXd2s<Z>^4Ar#i2sK9py#Nr~@%V_YM?r>9<-
zvuB0&mWcX;-xi%%Zn!II{_CX)uKj;Xqsp2X_p!a%{2=qLc<#)}LMiViSibG{+1xn$
zR57#v7MtrQGH$w0?iJI#6XJF|gr&0gt>Q%grxT5SikI9x%iFTgW{uk3MESqmyHx%C
z?Nd%iac*L$>1NR}pOHDGW%=fb&%cR2{rY;fQPj7yKCi=$=uMuvCDq4kLhD0~+hX7>
z;@@sl9=U6Rp_p5O^5WRE8WEev+m24#D3l`jL-DrtC#xS}^Sa;cJiYr#%K5D~Gad@p
zbU)p<x$^ilT}?-^e#Jt$(5E}^##tpyS2~|6|DgM0XRY$i{J-s=0zQ6nngHsXSthIx
z*igjDI-O&}^RVl^v3Ig-gmf0y9-FpOXvxd@789OZl|63m%Xzxf&F!?E!b{$oAj#Zp
z!6&iX-YT)bao2t_m%B2r?Pl@v)GdFHO?O#WmbzQlTh(K3nyuT>%G8jm3D5Z^lzXvl
zcDuTTwI=rmLwt+h>r->4<|sA!Y^)7V(QY!~YA*YI?j+m(@{Y?--|R4}5ty?rVY05X
zs)y`H<89%td^Z%&@7>ei^jT_#+rnAf8rDY|Sa0a4ecotPZIM4!x1WXa$*JPoIp1Pb
z9_Jjf(p|ItQFh`ahU;QFi({uB@0u3gwCBjT;)!cdcxavH4Kq!c8@BapL~81mqU+JN
zd8d6iFFDjSt7sWba8vZTp1IST>t(~umHd_kc`=9AZ09<<Ot&Fi`g7FDPd*d+HA3Z2
zNpFznK54zXnJb)kiE-4|3fYNEjKg=Zty7I~t6r_Et?I$HWA57qi}kB4%_q1$JmaTa
zxi<6Z+EW=n@9b!M5Tm9s+xk<?!B2hyA>F)>_N+QpT+M9!)l2k5adt#=;X1ELey_iE
zO}lvN&eCPA985MRx4DBFYfBhz7KdLcxV7ENz}zV6;?0cjH#RA%dVHH;*&5NQ`LUxb
zoBgC_MdrW#N6ltV_#<Xh>^En&metzTES8q{5^gJQTHX3)=kxNwhnMyp-L4cWsXL$h
zxyYPt3GKSVsvQam<{vl<<Bq=6itZ8L)9AV+aK$p+2gNg<>I5gHZh5RyxV=u5qjzFM
zjnL-MobOxAvUcCnQ;9jT!PN79^#d7;=?`jDXXi$0II=u)&&luleCkwjvuUk}PP~Iu
zYt}8Mf4b)sBiy=g+`sN4y6Pr}QgK1V)aPYCU&@7kp87m&^TniI@%hdhddgxqhb~J~
zIq^AXx9TJop@{mYLRx3s=S81&JH7v7>gkN~+c&fwiyFQv?QOD|{{OJZ+S`&#c1@i8
z_1uJQ4gIE<cfANdIrZYY{9|2L*05Ce=gtO|lpgmi=Z5T9^#4gT>rLI70-d_aCu%i!
zoIMu9IZ3%@`rD2pjMhN{4pOh@S2ek|m0eWsGc>wYxbgK`fydFawhEaVJMNh5Z{CsP
zs&M}8_M64&)$;>u>zi`6{9Tl~rK8Z5bCSQ!sc+HX{HY)9b?~S0n#-%!ZGZH>peI4{
zt+v^*B`hcP*NMLry_PDPdo1$&&j=~j$=eQi?>}rfYnuaSkpG@D+q_e>n@Xd^i?lcX
z+7Y_5Ow_>caQVhNU&D6i<V;oYWtjQ*NoM6ch047vZNxz>ngq#Q*C#*xI5#E8q}|pk
zI>1-?ZsyyNEuUf}{vAtiO5GBj>oZlsw`KQ@Z=IjHR(l-N3fZx0{+)e`4FB|=Z}EHm
zZu7<*&L3Bz4&1)C{K!@%VZ)s#=KVeze5rqzO;>-1Z1tM_rCgV@SbnPB=FYj^A-zGl
z_s~-Bv-Yg(w^toJwjuRF&}+wMS5hYVy`S~+o=fs_mXmz-3A^JTHOzgaVmfo}@xNwe
zUK7L)Y`^KXWQMkvS=thoOkM}`+R4{`TRv8kHdgiEe%KiH#z<#__b-Rl_x9X=)LOsy
zT7B<Cp_H;eT}$?gPi$SD(=$auw?~n;@t7N@k@dIDcULC<5P7#{V_=iUi|U+q6Q0W!
zDalS=0;~c-eVY}oGD_$AOi_?(%CtH5O`5m4^I)<Ro9YRlh~<hGBs3h;j=#Slm-+B_
z{gGo13t480&ephVwBl;Ow(si#n&t>7=a_GQP<ub;ee6OOOU-v_w{JUr-+lewW+zUg
z^flM3LqYm4=bYbqpw=$^edt1#ndWU@<fbZg-TWwad#`Uz{r6kdAsUWiJSt0VuC;tG
z?NL#)4Q+bDH~ET7W^e!D-f#Crye7CNtKWX@TVlWdc6E@3V^-ViuW?gACS-3@pY_0Q
z-iGgs0-CPKNM}52$*gqDdGEN8WhFP?rn}RU|L1T1z969K%GOD|&o8`xIA?M+=Okf;
z=fQGMcS?I^?bA~AxcpE&NB`N0`{HZQbE$e9-r!do+N6<oJUfT~>4Ed@Yu1AVKk81}
z8<TwL*NT9ql%~Zw(Ja5W9|d#T<TveAzOcT0O+J^Z$1{nb`CwP++%|6dQ+e#yl7OZc
z!qL(EsvdG5^lq0i*5z#9r!ht0(S)ySCVq)DRrTmj?%H&BU-9Ixjtf}?yW4NZoqe!t
z{jF^6DGHA^u5(?tk|j`wLw}>~y#udp^VY8nXnMlddnx`&==?=2nT0h+%Cec)6|deq
z&53i8^__!d3;LehC#+u>(DX!z^J=;HMBZ;wT&f;<A60J8vzk-hZ@b-zb5ix1(<d!O
zy(aj4V7uKXH7~#2cDWPhC6fbruO6FPoVPH2p7+^ng4l71t7`Jc)2j7ag_gW5kiR{<
z`^Vqe-(<K{JNRytCah!0bhSCZt(tNF?cDm+0Zk^h*UVp-bE$gheU!Vstx{(H*?(>e
zSu!Q>94brUJ1)ENxYiT}-BzyKyu}vp*s9k!ab7B_nDTb2aLxZNTad!YHPH{sxl}#8
zAEa)JHLlrrx^8(u(-s>$%X2ec|8QBzlF2EPcDw4%{_VHUgNBli#!ksQAaHZPDAR*%
z4j0G!)3}=_t7v70X>93UifxR!2{8Z-8+L{WDGC4C&%n%}rSP=b>bdm-(4>;5tDnm{
Hr-UW|hR3J6


From 22d139ecf88db80658daea1401597a4b9e1b399f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 13:38:03 +0100
Subject: [PATCH 15/90] Added titlebar icon

---
 public/titleicon.svg | 9 +++++++++
 src/main.app.js      | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 public/titleicon.svg

diff --git a/public/titleicon.svg b/public/titleicon.svg
new file mode 100644
index 00000000..f88a3088
--- /dev/null
+++ b/public/titleicon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 90 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
+    <g transform="matrix(1,0,0,1,-30.245,-47.0254)">
+        <g id="path3773" transform="matrix(0.12596,0,0,0.12596,28.1368,19.1335)">
+            <path d="M212.85,344.652C234.052,276.913 297.347,227.702 372.047,227.702C446.747,227.702 510.042,276.913 531.245,344.652L531.245,344.652L531.246,344.656C531.789,346.391 532.304,348.138 532.791,349.896C556.452,421.618 655.593,393.868 655.593,393.868L721.09,563.056L472.356,659.347L430.306,550.728L430.129,550.794L406.853,490.142C408.621,489.464 410.361,488.736 412.072,487.962C419.736,484.232 426.404,480.109 432.198,475.703C447.995,463.209 459.586,446.041 465.257,426.69C473.38,395.32 463.384,366.691 463.101,365.891C449.309,328.959 413.54,302.366 372.047,302.366C330.554,302.366 294.785,328.959 280.994,365.891C280.711,366.689 270.714,395.319 278.838,426.69C284.509,446.041 296.099,463.209 311.897,475.703C317.69,480.109 324.359,484.232 332.023,487.962C333.734,488.736 335.474,489.464 337.242,490.142L337.166,490.34C337.166,490.34 313.965,550.794 313.965,550.794L313.788,550.728L271.739,659.347L23.004,563.056L88.501,393.868C88.501,393.868 187.642,421.618 211.303,349.896C211.79,348.138 212.306,346.391 212.849,344.656L212.85,344.652L212.85,344.652Z" style="fill:white;fill-rule:nonzero;stroke:white;stroke-width:12.54px;"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/main.app.js b/src/main.app.js
index aff30501..b1b606db 100644
--- a/src/main.app.js
+++ b/src/main.app.js
@@ -1,9 +1,11 @@
 import { Titlebar, Color } from 'custom-electron-titlebar'
 
+
 // Only show custom menubar for Windows or Linux
 if ((process.platform !== 'darwin')) {
     new Titlebar({
-        backgroundColor: Color.fromHex('#c5247f')
+        backgroundColor: Color.fromHex('#c5247f'),
+        icon: './titleicon.svg'
     });
 }
 

From f35a06008ca05e6126244bee7ff5e37213340c4a Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 3 Jun 2019 15:50:07 +0100
Subject: [PATCH 16/90] Added CSS to better style the electron menubar

---
 src/assets/less/app.less   | 17 +++++++++++++++++
 src/assets/less/theme.less |  3 +++
 2 files changed, 20 insertions(+)
 create mode 100644 src/assets/less/app.less

diff --git a/src/assets/less/app.less b/src/assets/less/app.less
new file mode 100644
index 00000000..008ee44f
--- /dev/null
+++ b/src/assets/less/app.less
@@ -0,0 +1,17 @@
+// Theming specific to the electron app
+
+.menubar-menu-container {
+    box-shadow: 0.5px 1px 4px 0px rgba(0,0,0,0.3) !important;
+}
+
+.menubar-menu-container > * {
+    box-shadow: none !important; 
+}
+
+.menubar-menu-container .action-menu-item, .menubar-menu-container .action-label {
+    cursor: default
+}
+
+.menubar-menu-container a:hover {
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 96eae129..26ed2ebd 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -4,6 +4,9 @@
 // Highlight.js
 @import "./highlight.less";
 
+// Electron app theming
+@import "./app.less";
+
 // Custom OpenFlexure theming
 @global-primary-background: #C32280;
 

From 1d6ae5c9da7a87a13fd6ce97b45aef1972194fbb Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 4 Jun 2019 13:02:58 +0100
Subject: [PATCH 17/90] Manage transition to new camera settings structure

---
 .../paneSettingsComponents/cameraSettings.vue        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/paneSettingsComponents/cameraSettings.vue
index 7367c555..eaa27fac 100644
--- a/src/components/paneSettingsComponents/cameraSettings.vue
+++ b/src/components/paneSettingsComponents/cameraSettings.vue
@@ -48,8 +48,8 @@ export default {
   data: function () {
     return {
       shutterSpeed: this.$store.state.apiConfig.picamera_settings.shutter_speed,
-      analogGain: this.$store.state.apiConfig.picamera_settings.analog_gain,
-      digitalGain: this.$store.state.apiConfig.picamera_settings.digital_gain,
+      analogGain: this.$store.state.apiConfig.picamera_settings.analog_gain || this.$store.state.apiConfig.analog_gain,
+      digitalGain: this.$store.state.apiConfig.picamera_settings.digital_gain || this.$store.state.apiConfig.digital_gain,
       isCalibrating: false
     }
   },
@@ -57,8 +57,8 @@ export default {
   methods: {
     updateInputValues: function () {
       this.shutterSpeed = this.$store.state.apiConfig.picamera_settings.shutter_speed
-      this.digitalGain = this.$store.state.apiConfig.picamera_settings.digital_gain
-      this.analogGain = this.$store.state.apiConfig.picamera_settings.analog_gain
+      this.digitalGain = this.$store.state.apiConfig.picamera_settings.digital_gain || this.$store.state.apiConfig.digital_gain
+      this.analogGain = this.$store.state.apiConfig.picamera_settings.analog_gain || this.$store.state.apiConfig.analog_gain
     },
 
     applyConfigRequest: function() {
@@ -67,8 +67,8 @@ export default {
 
       //if (this.shutterSpeed != this.$store.state.apiConfig.picamera_settings.shutter_speed) {
       payload.picamera_settings.shutter_speed = this.shutterSpeed
-      payload.picamera_settings.analog_gain = this.analogGain
-      payload.picamera_settings.digital_gain = this.digitalGain
+      payload.analog_gain = this.analogGain
+      payload.digital_gain = this.digitalGain
       //};
 
       // Send request

From 341d2ae84589d5ace2adf8b76a19021cac9b5208 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 5 Jun 2019 17:47:36 +0100
Subject: [PATCH 18/90] Allow package version to be used in application

---
 vue.config.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/vue.config.js b/vue.config.js
index 1cf8436d..3cd859e9 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,5 @@
+var webpack = require('webpack');
+
 module.exports = {
   configureWebpack: config => {
     config.target = process.env.VUE_APP_TARGET || 'web',
@@ -8,7 +10,14 @@ module.exports = {
     }
     :{
       main: './src/main.js',
-    }
+    },
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env': {
+          PACKAGE_VERSION: JSON.stringify(require('./package.json').version)
+        }
+      })
+    )
   },
   outputDir: (process.env.VUE_APP_TARGET == 'electron-renderer') ? './app/dist' : './dist',
   publicPath: ''

From 2850eecf7a2cfb5d822364285ea5cdb0d71b493c Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 5 Jun 2019 17:48:19 +0100
Subject: [PATCH 19/90] Add modal dialog method

---
 src/main.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index 1c494b89..8d31ce2d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,8 +36,20 @@ Vue.mixin({
       return new Promise(showModal)
     },
 
-    modalNotify: function(message) {
-      UIkit.notification({message: message, status: 'success'})
+    modalNotify: function(message, status = 'success') {
+      UIkit.notification({message: message, status: status})
+    },
+
+    modalDialog: function(title, message) {
+      UIkit.modal.dialog(`
+        <button class="uk-modal-close-default" type="button" uk-close></button>
+        <div class="uk-modal-header">
+          <h2 class="uk-modal-title">${title}</h2>
+        </div>
+        <div class="uk-modal-body">
+          <p>${message}</p>
+        </div>
+      `);
     },
 
     modalError: function(error) {

From ee91e11853568b8000d46289658bc4e9060e12fd Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 5 Jun 2019 17:48:41 +0100
Subject: [PATCH 20/90] Updated API to run with server 1.1.x

---
 .../paneSettingsComponents/cameraSettings.vue | 33 ++++++++++++-------
 .../microscopeSettings.vue                    |  8 ++---
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/paneSettingsComponents/cameraSettings.vue
index eaa27fac..a9bc0b53 100644
--- a/src/components/paneSettingsComponents/cameraSettings.vue
+++ b/src/components/paneSettingsComponents/cameraSettings.vue
@@ -4,21 +4,21 @@
       <div>
         <label class="uk-form-label" for="form-stacked-text">Exposure time</label>
         <div class="uk-form-controls">
-          <input v-model="shutterSpeed" class="uk-input uk-form-small" type="number">
+          <input v-model="displayShutterSpeed" class="uk-input uk-form-small" type="number">
         </div>
       </div>
 
       <div>
         <label class="uk-form-label" for="form-stacked-text">Analogue gain</label>
         <div class="uk-form-controls">
-          <input v-model="analogGain" class="uk-input uk-form-small" type="number">
+          <input v-model="displayAnalogGain" class="uk-input uk-form-small" type="number" step="0.01">
         </div>
       </div>
 
       <div>
         <label class="uk-form-label" for="form-stacked-text">Digital gain</label>
         <div class="uk-form-controls">
-          <input v-model="digitalGain" class="uk-input uk-form-small" type="number">
+          <input v-model="displayDigitalGain" class="uk-input uk-form-small" type="number" step="0.01">
         </div>
       </div>
 
@@ -47,18 +47,18 @@ export default {
 
   data: function () {
     return {
-      shutterSpeed: this.$store.state.apiConfig.picamera_settings.shutter_speed,
-      analogGain: this.$store.state.apiConfig.picamera_settings.analog_gain || this.$store.state.apiConfig.analog_gain,
-      digitalGain: this.$store.state.apiConfig.picamera_settings.digital_gain || this.$store.state.apiConfig.digital_gain,
+      shutterSpeed: this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed,
+      analogGain: this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain,
+      digitalGain: this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain,
       isCalibrating: false
     }
   },
 
   methods: {
     updateInputValues: function () {
-      this.shutterSpeed = this.$store.state.apiConfig.picamera_settings.shutter_speed
-      this.digitalGain = this.$store.state.apiConfig.picamera_settings.digital_gain || this.$store.state.apiConfig.digital_gain
-      this.analogGain = this.$store.state.apiConfig.picamera_settings.analog_gain || this.$store.state.apiConfig.analog_gain
+      this.shutterSpeed = this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed
+      this.digitalGain = this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain
+      this.analogGain = this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain
     },
 
     applyConfigRequest: function() {
@@ -66,9 +66,9 @@ export default {
       var payload = {picamera_settings:{}}
 
       //if (this.shutterSpeed != this.$store.state.apiConfig.picamera_settings.shutter_speed) {
-      payload.picamera_settings.shutter_speed = this.shutterSpeed
-      payload.analog_gain = this.analogGain
-      payload.digital_gain = this.digitalGain
+      payload.camera_settings.picamera_settings.shutter_speed = this.shutterSpeed
+      payload.camera_settings.picamera_settings.analog_gain = this.analogGain
+      payload.camera_settings.picamera_settings.digital_gain = this.digitalGain
       //};
 
       // Send request
@@ -119,6 +119,15 @@ export default {
   },
 
   computed: {
+    displayDigitalGain: function () {
+      return Number(this.digitalGain).toFixed(2)
+    },
+    displayAnalogGain: function () {
+      return Number(this.analogGain).toFixed(2)
+    },
+    displayShutterSpeed: function () {
+      return (this.shutterSpeed != 0) ? this.shutterSpeed : "auto"
+    },
     recalibrateApiUri: function () {
       return this.$store.getters.uri + "/plugin/default/camera_calibration/recalibrate"
     },
diff --git a/src/components/paneSettingsComponents/microscopeSettings.vue b/src/components/paneSettingsComponents/microscopeSettings.vue
index c6cf8972..ecc52db9 100644
--- a/src/components/paneSettingsComponents/microscopeSettings.vue
+++ b/src/components/paneSettingsComponents/microscopeSettings.vue
@@ -52,14 +52,14 @@ export default {
   data: function () {
     return {
       microscopeName: this.$store.state.apiConfig.name,
-      stageBacklash: this.$store.state.apiConfig.backlash
+      stageBacklash: this.$store.state.apiConfig.stage_settings.backlash
     }
   },
 
   methods: {
     updateInputValues: function () {
       this.microscopeName = this.$store.state.apiConfig.name;
-      this.stageBacklash = this.$store.state.apiConfig.backlash
+      this.stageBacklash = this.$store.state.apiConfig.stage_settings.backlash
     },
 
     applyConfigRequest: function() {
@@ -69,8 +69,8 @@ export default {
         payload.name = this.microscopeName
       };
 
-      if (this.stageBacklash != this.$store.state.apiConfig.backlash) {
-        payload.backlash = this.stageBacklash
+      if (this.stageBacklash != this.$store.state.apiConfig.stage_settings.backlash) {
+        payload.stage_settings.backlash = this.stageBacklash
       }
 
       // Send request to update config

From a6a918827c959ec5f9b7172d4ff6ce986a71ba39 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 5 Jun 2019 17:48:50 +0100
Subject: [PATCH 21/90] Added version mismatch warning

---
 src/components/paneConnect.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
index e50be8f5..20130840 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -122,6 +122,26 @@ export default {
       this.$store.dispatch('firstConnect')
       .then (() => {
         console.log("Connected!")
+        this.checkServerVersion()
+      })
+      .catch(error => {
+        this.modalError(error) // Let mixin handle error
+      })
+    },
+
+    checkServerVersion: function () {
+      this.$store.dispatch('updateState')
+      .then (() => {
+        console.log(this.$store.state.apiState.version)
+        var serverVersion = this.$store.state.apiState.version
+        var serverVersionMajor = serverVersion.substring(0, 3)
+        console.log(serverVersionMajor)
+        var clientVersion = process.env.PACKAGE_VERSION
+        var clientVersionMajor = clientVersion.substring(0, 3)
+        console.log(clientVersionMajor)
+        if (serverVersionMajor != clientVersionMajor) {
+          this.modalDialog("Version mismatch", "Client and microscope versions do not match. Consider updating your microscope software. Some functionality may currently be broken.", status='warning')
+        }
       })
       .catch(error => {
         this.modalError(error) // Let mixin handle error

From 28f670235337a96e4340950dbd042b0d3b23c964 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 5 Jun 2019 17:53:53 +0100
Subject: [PATCH 22/90] Shifted version number to match server

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

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

From 104d7c03450268624092642a5b95c7935be7214e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 6 Jun 2019 11:28:11 +0100
Subject: [PATCH 23/90] Minor reformat

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

diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/paneSettingsComponents/cameraSettings.vue
index a9bc0b53..7433babe 100644
--- a/src/components/paneSettingsComponents/cameraSettings.vue
+++ b/src/components/paneSettingsComponents/cameraSettings.vue
@@ -63,7 +63,9 @@ export default {
 
     applyConfigRequest: function() {
       console.log("Applying config to the microscope")
-      var payload = {picamera_settings:{}}
+      var payload = {
+        picamera_settings: {}
+      }
 
       //if (this.shutterSpeed != this.$store.state.apiConfig.picamera_settings.shutter_speed) {
       payload.camera_settings.picamera_settings.shutter_speed = this.shutterSpeed

From f17d1e71f928cdcc56c9fadb169c3a58e40b1332 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 6 Jun 2019 11:28:22 +0100
Subject: [PATCH 24/90] Fixed stage settings payload structure

---
 .../paneSettingsComponents/microscopeSettings.vue           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/paneSettingsComponents/microscopeSettings.vue b/src/components/paneSettingsComponents/microscopeSettings.vue
index ecc52db9..282f8a75 100644
--- a/src/components/paneSettingsComponents/microscopeSettings.vue
+++ b/src/components/paneSettingsComponents/microscopeSettings.vue
@@ -63,7 +63,9 @@ export default {
     },
 
     applyConfigRequest: function() {
-      var payload = {}
+      var payload = {
+        stage_settings: {}
+      }
 
       if (this.microscopeName != this.$store.state.apiConfig.name) {
         payload.name = this.microscopeName
@@ -73,6 +75,8 @@ export default {
         payload.stage_settings.backlash = this.stageBacklash
       }
 
+      console.log(payload)
+
       // Send request to update config
       axios.post(this.configApiUri, payload)
         .then(response => { 

From bc8096fe7a34c540b217a7d6391527d84e8062e5 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 6 Jun 2019 14:42:57 +0100
Subject: [PATCH 25/90] Added electron-store for persistent app settings

---
 package-lock.json | 153 ++++++++++++++++++++++++++++++++++++++++------
 package.json      |   1 +
 2 files changed, 137 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a00b113..19b223fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "0.2.6",
+  "version": "1.1.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1487,7 +1487,6 @@
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
       "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2944,6 +2943,105 @@
         "typedarray": "^0.0.6"
       }
     },
+    "conf": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/conf/-/conf-4.1.0.tgz",
+      "integrity": "sha512-/G++SsVVt4MkKYZ1E+XdNEyCYghM7e7SSgx4PA55lQrmJjUY1APGGfz42YX9YpRkhLFvlhkJ5S341FWsufZZ5w==",
+      "requires": {
+        "ajv": "^6.10.0",
+        "dot-prop": "^5.0.0",
+        "env-paths": "^2.2.0",
+        "json-schema-typed": "^7.0.0",
+        "make-dir": "^3.0.0",
+        "pkg-up": "^3.0.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "dependencies": {
+        "dot-prop": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.0.0.tgz",
+          "integrity": "sha512-RTmaF2jx3nOBO2GvtFqjnDLycjFUMqt+2pwRx7JVYa81lDauoj9aNkyrJI2ikR58FbBIchiIlRiGG+muLJ4oHQ==",
+          "requires": {
+            "is-obj": "^1.0.0"
+          }
+        },
+        "env-paths": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz",
+          "integrity": "sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA=="
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.0.tgz",
+          "integrity": "sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==",
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+          "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "pkg-up": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+          "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.1.tgz",
+          "integrity": "sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ=="
+        },
+        "write-file-atomic": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.0.tgz",
+          "integrity": "sha512-EIgkf60l2oWsffja2Sf2AL384dx328c0B+cIYPTQq5q2rOYuDV00/iPFBOUiDKKwKMOhkymH8AidPaRvzfxY+Q==",
+          "requires": {
+            "imurmurhash": "^0.1.4",
+            "is-typedarray": "^1.0.0",
+            "signal-exit": "^3.0.2",
+            "typedarray-to-buffer": "^3.1.5"
+          }
+        }
+      }
+    },
     "configstore": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
@@ -4213,6 +4311,22 @@
         "mime": "^2.4.1"
       }
     },
+    "electron-store": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/electron-store/-/electron-store-3.2.0.tgz",
+      "integrity": "sha512-+goKW06sPo8KyPd9ctozRQGjctJ+M4qDpZ0Dx02X08AMf6lSlHQRmYHMYbKXpVpoq4y250wRfEHNxtP72HbfVQ==",
+      "requires": {
+        "conf": "^4.0.1",
+        "type-fest": "^0.3.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ=="
+        }
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.133",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.133.tgz",
@@ -4750,8 +4864,7 @@
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-glob": {
       "version": "2.2.6",
@@ -4770,8 +4883,7 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -6223,8 +6335,7 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
     "indent-string": {
       "version": "2.1.0",
@@ -6545,8 +6656,7 @@
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
-      "dev": true
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
     },
     "is-path-cwd": {
       "version": "2.1.0",
@@ -6646,8 +6756,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-utf8": {
       "version": "0.2.1",
@@ -6786,8 +6895,12 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "json-schema-typed": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-7.0.0.tgz",
+      "integrity": "sha512-ikVqF4dlAgRvAb3MDAgDQRtB/GIC8+iq+z5bczPh9bUT7bAZCdGfGCypJHBquzZNoxebql1UgPxWbImnvkSuJg=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -9044,8 +9157,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "pupa": {
       "version": "1.0.0",
@@ -10988,6 +11100,14 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -11226,7 +11346,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
diff --git a/package.json b/package.json
index e5447230..6df82d1d 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "about-window": "^1.12.1",
     "custom-electron-titlebar": "^3.0.8",
     "electron-context-menu": "^0.11.0",
+    "electron-store": "^3.2.0",
     "electron-updater": "^4.0.6"
   },
   "devDependencies": {

From e2eb051c3143910dc97870602eff312ffd8efdc1 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 6 Jun 2019 14:43:25 +0100
Subject: [PATCH 26/90] Control custom title bar using store value

---
 app/app.js      | 54 +++++++++++++++++++++++++++++++++----------------
 app/menu.js     | 14 ++++++++++++-
 app/store.js    |  9 +++++++++
 src/main.app.js |  9 ++++++---
 4 files changed, 65 insertions(+), 21 deletions(-)
 create mode 100644 app/store.js

diff --git a/app/app.js b/app/app.js
index 066ae2d2..34c5c85a 100644
--- a/app/app.js
+++ b/app/app.js
@@ -6,6 +6,9 @@ const autoUpdater = updater.autoUpdater;
 const contextMenu = require('electron-context-menu')
 const path = require('path')
 
+// Attach settings store
+const { store } = require('./store')
+
 // Auto upadater 
 autoUpdater.autoDownload = false;
 
@@ -14,9 +17,7 @@ autoUpdater.setFeedURL({
     url: "https://gitlab.com/openflexure/openflexure-microscope-jsclient/-/jobs/artifacts/stable/raw?job=package"
 });
 
-autoUpdater.on('checking-for-update', function () {
-    sendStatusToWindow('Checking for update...');
-});
+autoUpdater.on('checking-for-update', function () {});
 
 autoUpdater.on('update-available', function (info) {
   sendStatusToWindow('Update available.' + info)
@@ -76,51 +77,70 @@ let mainWindow
 // Set the application menu
 require('./menu.js')
 
+// Handle redrawing the mainWindow
+let recreatingWindowInProgress = false;
+
+function toggleCustomTitleBar () {
+  // Mark window as being recreated, to prevent stopping the application
+  recreatingWindowInProgress = true
+
+  // Invert the drawCustomTitleBar setting
+  store.set('drawCustomTitleBar', !store.get('drawCustomTitleBar'))
+
+  // Destroy old window
+  mainWindow.destroy()
+  // Create new window
+  createWindow()
+
+  // Mark window as no longer being recreated
+  recreatingWindowInProgress = false
+}
+
 function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    frame: (process.platform !== 'darwin') ? false : true,
+    frame: !store.get('drawCustomTitleBar'),
     width: 1124, 
     height: 800,
     icon: path.join(__dirname, '/icons/png/64x64.png')
   })
 
+  // Make a context menu
   contextMenu({
     showCopyImageAddress: true,
     showSaveImageAs: true,
     showInspectElement: false,
   });
 
+  // Load window contents
   mainWindow.loadURL(url)
+
+  // Check for updates
   autoUpdater.checkForUpdates();
 
   // Emitted when the window is closed.
   mainWindow.on('closed', function() {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
+    mainWindow = null  // Dereference the window object
   })
 }
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow)
+app.on('ready', () => {
+  createWindow()
+})
 
 // Quit when all windows are closed.
 app.on('window-all-closed', function() {
-  // On OS X it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
+  if ((process.platform !== 'darwin') && recreatingWindowInProgress != true) {
     app.quit()
   }
 })
 
 app.on('activate', function() {
-  // On OS X it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {
     createWindow()
   }
-})
\ No newline at end of file
+})
+
+// Export toggleCustomTitleBar for use in ./menu.js
+module.exports.toggleCustomTitleBar = toggleCustomTitleBar
\ No newline at end of file
diff --git a/app/menu.js b/app/menu.js
index 950e8f42..bcfe4fed 100644
--- a/app/menu.js
+++ b/app/menu.js
@@ -5,6 +5,9 @@ const path = require('path')
 
 const openAboutWindow = require('about-window').default
 
+const main = require('./app')
+const { store } = require('./store')
+
 const template = [
   {
     label: 'Edit',
@@ -26,7 +29,16 @@ const template = [
       { role: 'forcereload' },
       { role: 'toggledevtools' },
       { type: 'separator' },
-      { role: 'togglefullscreen' }
+      { role: 'togglefullscreen' },
+      { type: 'separator' },
+      {
+        type: 'checkbox',
+        checked: store.get('drawCustomTitleBar'),
+        label: 'Custom titlebar',
+        click () {
+          main.toggleCustomTitleBar()
+        }
+      }
     ]
   },
   {
diff --git a/app/store.js b/app/store.js
new file mode 100644
index 00000000..bd1a8b95
--- /dev/null
+++ b/app/store.js
@@ -0,0 +1,9 @@
+const Store = require('electron-store');
+const store = new Store();
+
+if (store.has('drawCustomTitleBar') !== true) {
+  // Default to false if on MacOS, otherwise true
+  store.set('drawCustomTitleBar', (process.platform !== 'darwin') ? true : false)
+}
+
+module.exports.store = store
\ No newline at end of file
diff --git a/src/main.app.js b/src/main.app.js
index b1b606db..27d2b187 100644
--- a/src/main.app.js
+++ b/src/main.app.js
@@ -1,8 +1,11 @@
-import { Titlebar, Color } from 'custom-electron-titlebar'
+// Load settings store from main process
+const { store } = require('electron').remote.require('./store')
 
+// Load extra modules we'll be using
+const { Titlebar, Color } = require('custom-electron-titlebar');
 
-// Only show custom menubar for Windows or Linux
-if ((process.platform !== 'darwin')) {
+// Only show custom menubar if current window has no frame
+if (store.get('drawCustomTitleBar') == true) {
     new Titlebar({
         backgroundColor: Color.fromHex('#c5247f'),
         icon: './titleicon.svg'

From 2bc8595e4835bd1a3328aa5362fe8305e565c7c4 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 6 Jun 2019 15:43:42 +0100
Subject: [PATCH 27/90] Update CI to allow beta*.yml artifacts

---
 .gitlab-ci.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 9a3f8a91..b32778af 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -36,7 +36,7 @@ package:
     - mv ./release-builds/*.deb .
     - mv ./release-builds/*.exe .
     - mv ./release-builds/*.exe.blockmap .
-    - mv ./release-builds/latest*.yml .
+    - mv ./release-builds/?(beta*.yml|latest*.yml) .
   artifacts:
     name: "dist"
     paths:
@@ -45,6 +45,7 @@ package:
       - "*.exe"
       - "*.exe.blockmap"
       - "latest*.yml"
+      - "beta*.yml"
   only:
     - stable
     - tags

From 722edeb4de2841e1f58d89b3872146d05c50cc78 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 6 Jun 2019 16:02:08 +0100
Subject: [PATCH 28/90] Enabled extglob in CI script

---
 .gitlab-ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b32778af..73d680d7 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -32,6 +32,7 @@ package:
     - npm install
     - npm run build:app
     - npm run release
+    - shopt -s extglob
     - mv ./release-builds/*.AppImage .
     - mv ./release-builds/*.deb .
     - mv ./release-builds/*.exe .

From 61121b0781d943b0c51278db1fffa8f117c5d7d0 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 16:35:07 +0100
Subject: [PATCH 29/90] Restructured npm scripts

---
 package.json | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 6df82d1d..5003be1a 100644
--- a/package.json
+++ b/package.json
@@ -11,17 +11,16 @@
   "license": "GNU General Public License v3.0 ",
   "main": "./app/app.js",
   "scripts": {
-    "release": "electron-builder --linux --config app/builder-config-raspi.yaml & electron-builder --win --linux --config app/builder-config-x86_64.yaml",
+    "build:web": "vue-cli-service build --mode production.web",
+    "build:app": "vue-cli-service build --mode production.app",
+    "serve:web": "vue-cli-service serve",
+    "start:app": "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",
     "dist:win": "electron-builder --win --config app/builder-config-x86_64.yaml",
     "dist:dmg": "electron-builder --mac --config app/builder-config-x86_64.yaml",
     "dist:appx": "electron-builder --win --config app/builder-config-appx.yaml",
-    "build:web": "vue-cli-service build --mode production.web",
-    "build:app": "vue-cli-service build --mode production.app",
-    "electron:run": "npm run build:app && electron app/app.js",
-    "electron:dev": "electron app/app.dev.js",
-    "serve:web": "vue-cli-service serve"
+    "release": "electron-builder --linux --config app/builder-config-raspi.yaml & electron-builder --win --linux --config app/builder-config-x86_64.yaml"
   },
   "dependencies": {
     "about-window": "^1.12.1",

From 293409b39cd077d5b404686f0c8ce8e94707a6d7 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 16:35:26 +0100
Subject: [PATCH 30/90] Account for server version being undefined in old
 releases

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

diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
index 20130840..e0bfc337 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -132,14 +132,17 @@ export default {
     checkServerVersion: function () {
       this.$store.dispatch('updateState')
       .then (() => {
-        console.log(this.$store.state.apiState.version)
-        var serverVersion = this.$store.state.apiState.version
-        var serverVersionMajor = serverVersion.substring(0, 3)
-        console.log(serverVersionMajor)
         var clientVersion = process.env.PACKAGE_VERSION
         var clientVersionMajor = clientVersion.substring(0, 3)
         console.log(clientVersionMajor)
-        if (serverVersionMajor != clientVersionMajor) {
+
+        var serverVersion = this.$store.state.apiState.version
+        if (serverVersion != undefined) {
+          var serverVersionMajor = serverVersion.substring(0, 3)
+        }
+        console.log(serverVersionMajor)
+
+        if ((serverVersion == undefined) || (serverVersionMajor != clientVersionMajor)) {
           this.modalDialog("Version mismatch", "Client and microscope versions do not match. Consider updating your microscope software. Some functionality may currently be broken.", status='warning')
         }
       })

From c2cfcb8e567d242ae4b2d5ba65a553814c796b6a Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 16:44:36 +0100
Subject: [PATCH 31/90] Added a disconnect button to reset vuex state

---
 src/components/paneConnect.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
index e0bfc337..7438552a 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -55,9 +55,15 @@
       </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>
-
     </form>
 
+  <button 
+    v-if="$store.getters.ready" 
+    v-on:click="$store.commit('resetState')" 
+    class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
+    Disconnect
+  </button>
+
   </div>
 
 </div>

From 83c933fb3c559b2658b22e19af3a2a804ce09e4e Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 17:02:50 +0100
Subject: [PATCH 32/90] Removed web and app specifiers from serve and start

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5003be1a..521afef2 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
   "scripts": {
     "build:web": "vue-cli-service build --mode production.web",
     "build:app": "vue-cli-service build --mode production.app",
-    "serve:web": "vue-cli-service serve",
-    "start:app": "npm run build:app && electron app/app.js",
+    "serve": "vue-cli-service serve",
+    "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",
     "dist:win": "electron-builder --win --config app/builder-config-x86_64.yaml",

From fd5e157c71ee5cac03292f61ef98b1ae47ba4d95 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 17:03:08 +0100
Subject: [PATCH 33/90] Save all package info to process.env

---
 vue.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue.config.js b/vue.config.js
index 3cd859e9..4e2ec2e3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,7 +14,7 @@ module.exports = {
     config.plugins.push(
       new webpack.DefinePlugin({
         'process.env': {
-          PACKAGE_VERSION: JSON.stringify(require('./package.json').version)
+          PACKAGE: JSON.stringify(require('./package.json'))
         }
       })
     )

From 033b649402afd62ccc1d368119a1173d95d83573 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 17:03:28 +0100
Subject: [PATCH 34/90] Get version from package info

---
 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 7438552a..bbf83522 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -138,7 +138,7 @@ export default {
     checkServerVersion: function () {
       this.$store.dispatch('updateState')
       .then (() => {
-        var clientVersion = process.env.PACKAGE_VERSION
+        var clientVersion = process.env.PACKAGE.version
         var clientVersionMajor = clientVersion.substring(0, 3)
         console.log(clientVersionMajor)
 

From 901fc50fe56ea6559999223847671f62872c8d05 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 17:03:42 +0100
Subject: [PATCH 35/90] Better client info in default capture metadata

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

diff --git a/src/components/paneCapture.vue b/src/components/paneCapture.vue
index 47f2aa6b..bebbaafb 100644
--- a/src/components/paneCapture.vue
+++ b/src/components/paneCapture.vue
@@ -206,7 +206,7 @@ export default {
       newTag: "",
       tags: [],
       customMetadata: {
-        Client: "openflexure.vue"
+        Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
       },
       newMetadata: {
         key: "",

From a8161413f3c9f2d3948ead8143dea0883ef8e810 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 17:28:01 +0100
Subject: [PATCH 36/90] Added link to homepage in Help menu

---
 app/menu.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/menu.js b/app/menu.js
index bcfe4fed..f8d54ab6 100644
--- a/app/menu.js
+++ b/app/menu.js
@@ -1,4 +1,4 @@
-const { app, Menu } = require('electron')
+const { app, shell, Menu } = require('electron')
 const updater = require("electron-updater");
 const autoUpdater = updater.autoUpdater;
 const path = require('path')
@@ -62,6 +62,13 @@ const template = [
           })
         }
       },
+      {
+        label: 'Homepage',
+        click () {
+          shell.openExternal('https://openflexure.org')
+        }
+      },
+      { type: 'separator' },
       {
         label: 'Check for Updates',
         click () {

From 945cf62363526974676f37b375601c75b7820dcf Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 18:39:21 +0100
Subject: [PATCH 37/90] Better aligned gallery cards

---
 .../paneDisplayComponents/galleryComponents/captureCard.vue   | 2 +-
 .../paneDisplayComponents/galleryComponents/scanCard.vue      | 2 +-
 src/components/paneDisplayComponents/galleryDisplay.vue       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/paneDisplayComponents/galleryComponents/captureCard.vue b/src/components/paneDisplayComponents/galleryComponents/captureCard.vue
index 36731b3c..1fa77043 100644
--- a/src/components/paneDisplayComponents/galleryComponents/captureCard.vue
+++ b/src/components/paneDisplayComponents/galleryComponents/captureCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
+	<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
 
     <div class="uk-card-media-top">
         
diff --git a/src/components/paneDisplayComponents/galleryComponents/scanCard.vue b/src/components/paneDisplayComponents/galleryComponents/scanCard.vue
index c0182177..e4f8761c 100644
--- a/src/components/paneDisplayComponents/galleryComponents/scanCard.vue
+++ b/src/components/paneDisplayComponents/galleryComponents/scanCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="captureCard uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">
+	<div class="captureCard uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium">
 
     <div class="uk-card-media-top">
 
diff --git a/src/components/paneDisplayComponents/galleryDisplay.vue b/src/components/paneDisplayComponents/galleryDisplay.vue
index 277886b7..cf8c2a87 100644
--- a/src/components/paneDisplayComponents/galleryDisplay.vue
+++ b/src/components/paneDisplayComponents/galleryDisplay.vue
@@ -30,9 +30,9 @@
         <h3 class="uk-inline uk-float-right uk-margin-remove"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
       </div>
 
-      <div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>
+      <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
         
-        <div v-for="item in sortedItems" :key="item.metadata.id" class="uk-remove-padding-remove-left" >
+        <div v-for="item in sortedItems" :key="item.metadata.id">
           <scanCard 
             v-if="'isScan' in item"
             :metadata="item.metadata"

From fc2f84743cb4e6e2875d3865a06140ab2dc205b2 Mon Sep 17 00:00:00 2001
From: jtc42 <jtc9242@gmail.com>
Date: Fri, 7 Jun 2019 18:41:42 +0100
Subject: [PATCH 38/90] Bumped up to beta 2

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

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

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 39/90] 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 40/90] 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 41/90] 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 42/90] 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 43/90] 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 44/90] 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 45/90] 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 46/90] 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 47/90] 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 48/90] 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 49/90] 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 50/90] 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 51/90] 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 52/90] 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 53/90] 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 54/90] 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 55/90] 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 56/90] 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 57/90] 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 58/90] 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 59/90] 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 60/90] 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 61/90] 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 62/90] 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 63/90] 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 64/90] 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 65/90] 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 66/90] 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 67/90] 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 68/90] 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 69/90] 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 70/90] 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 71/90] 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 72/90] 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 73/90] 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 74/90] 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 75/90] 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 76/90] 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 77/90] 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 78/90] 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 79/90] 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 80/90] 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 81/90] 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 82/90] 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 83/90] 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 84/90] 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 85/90] 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 86/90] 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)",

From 05d71344a05c0e09baa02ce56ca446b919c399fb Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 24 Jun 2019 13:03:35 +0100
Subject: [PATCH 87/90] Upgraded to electron-builder 21

---
 package-lock.json | 942 +++++++++++++++++++++++++++++++++++-----------
 package.json      |   2 +-
 2 files changed, 730 insertions(+), 214 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1a06229d..fba0969b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -850,6 +850,12 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
+      "dev": true
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -903,6 +909,21 @@
         }
       }
     },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "dev": true,
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "@types/debug": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.4.tgz",
+      "integrity": "sha512-D9MyoQFI7iP5VdpEyPZyjjqIJ8Y8EDNQFIFVLOmeg1rI1xiHOChyUPMPRUVfqFCerxfE+yS3vMyj37F6IdtOoQ==",
+      "dev": true
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -1513,12 +1534,25 @@
       "dev": true
     },
     "ansi-align": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
-      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
       "dev": true,
       "requires": {
-        "string-width": "^2.0.0"
+        "string-width": "^3.0.0"
+      },
+      "dependencies": {
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        }
       }
     },
     "ansi-colors": {
@@ -1580,49 +1614,91 @@
       }
     },
     "app-builder-bin": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-2.6.6.tgz",
-      "integrity": "sha512-G0Ee6xkbxV+fvM/7xXWIgSDjWAD4E/d/aNbxerq/TVsCyBIau/0VPmrEqBMyZv0NbTwLDW5aF/yHG+0ZEY77kA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.0.1.tgz",
+      "integrity": "sha512-eSC1ZxQIGuvhXKB9m7rRwTbou522FbQuc95XoqOMqMjf50//So1IjNPFOzXd6SDHcMx7f5SYEW5AYSs1Pwovtw==",
       "dev": true
     },
     "app-builder-lib": {
-      "version": "20.40.2",
-      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-20.40.2.tgz",
-      "integrity": "sha512-SAbfua8+L3pFbQp3QFpKV0PzHJPJqepROeX/FPrfdL02zxlw+BVOe6KfC3+UV6XUombWvVPG+SwG956vfIx/Cw==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-21.0.1.tgz",
+      "integrity": "sha512-B6dr9Wg75uUDisAk5bqLRbWMx5H5iZc0ikjMZEoo9tVQRHnbkCM5O9BPIlVWDjz2qIkQyVr4jCY/Ll9gbMExyg==",
       "dev": true,
       "requires": {
         "7zip-bin": "~4.1.0",
-        "app-builder-bin": "2.6.6",
+        "app-builder-bin": "3.0.1",
         "async-exit-hook": "^2.0.1",
-        "bluebird-lst": "^1.0.7",
-        "builder-util": "9.7.1",
-        "builder-util-runtime": "8.2.1",
+        "bluebird-lst": "^1.0.9",
+        "builder-util": "10.2.0",
+        "builder-util-runtime": "8.2.5",
         "chromium-pickle-js": "^0.2.0",
         "debug": "^4.1.1",
-        "ejs": "^2.6.1",
+        "ejs": "^2.6.2",
         "electron-osx-sign": "0.4.11",
-        "electron-publish": "20.40.0",
-        "fs-extra-p": "^7.0.1",
+        "electron-publish": "21.0.1",
+        "fs-extra-p": "^8.0.2",
         "hosted-git-info": "^2.7.1",
         "is-ci": "^2.0.0",
-        "isbinaryfile": "^4.0.0",
-        "js-yaml": "^3.13.0",
+        "isbinaryfile": "^4.0.1",
+        "js-yaml": "^3.13.1",
         "lazy-val": "^1.0.4",
         "minimatch": "^3.0.4",
         "normalize-package-data": "^2.5.0",
         "plist": "^3.0.1",
-        "read-config-file": "3.2.2",
+        "read-config-file": "3.3.0",
         "sanitize-filename": "^1.6.1",
-        "semver": "^6.0.0",
-        "temp-file": "^3.3.2"
+        "semver": "^6.1.2",
+        "temp-file": "^3.3.3"
       },
       "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
         "ci-info": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
           "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
           "dev": true
         },
+        "ejs": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.2.tgz",
+          "integrity": "sha512-PcW2a0tyTuPHz3tWyYqtK6r1fZ3gp+3Sop8Ph+ZYN81Ob5rwmbHEzaqs10N3BEsaGTkh/ooniXK+WwszGlc2+Q==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        },
         "is-ci": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
@@ -1633,9 +1709,9 @@
           }
         },
         "semver": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
-          "integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==",
+          "version": "6.1.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.2.tgz",
+          "integrity": "sha512-z4PqiCpomGtWj8633oeAdXm1Kn1W++3T8epkZYnwiVgIYIJ0QHszhInYSJTYxebByQH7KVCEAn8R9duzZW2PhQ==",
           "dev": true
         }
       }
@@ -2158,24 +2234,36 @@
       "dev": true
     },
     "boxen": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
-      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-3.2.0.tgz",
+      "integrity": "sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==",
       "dev": true,
       "requires": {
-        "ansi-align": "^2.0.0",
-        "camelcase": "^4.0.0",
-        "chalk": "^2.0.1",
-        "cli-boxes": "^1.0.0",
-        "string-width": "^2.0.0",
+        "ansi-align": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chalk": "^2.4.2",
+        "cli-boxes": "^2.2.0",
+        "string-width": "^3.0.0",
         "term-size": "^1.2.0",
+        "type-fest": "^0.3.0",
         "widest-line": "^2.0.0"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -2358,31 +2446,68 @@
       "dev": true
     },
     "builder-util": {
-      "version": "9.7.1",
-      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-9.7.1.tgz",
-      "integrity": "sha512-txpzYIeuHFjrOQWPTJDvhJYisIVGJdSG9ppccE+y7agT0YNhBlVHGnd8+HgFTajYE34xzB5zf1/zxiiDqSKSpA==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-10.2.0.tgz",
+      "integrity": "sha512-9x+RpqKl50VnestgFa+0r9atMq7NUF0b719W8NSzRg/WOrPI9z3oJiLJv0L+JOSzLiu80Fu97kvEb/1l3+/9TQ==",
       "dev": true,
       "requires": {
         "7zip-bin": "~4.1.0",
-        "app-builder-bin": "2.6.6",
-        "bluebird-lst": "^1.0.7",
-        "builder-util-runtime": "^8.2.1",
+        "@types/debug": "^4.1.4",
+        "app-builder-bin": "3.0.1",
+        "bluebird-lst": "^1.0.9",
+        "builder-util-runtime": "^8.2.5",
         "chalk": "^2.4.2",
         "debug": "^4.1.1",
-        "fs-extra-p": "^7.0.1",
+        "fs-extra-p": "^8.0.2",
         "is-ci": "^2.0.0",
-        "js-yaml": "^3.13.0",
-        "source-map-support": "^0.5.11",
+        "js-yaml": "^3.13.1",
+        "source-map-support": "^0.5.12",
         "stat-mode": "^0.3.0",
-        "temp-file": "^3.3.2"
+        "temp-file": "^3.3.3"
       },
       "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
         "ci-info": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
           "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
           "dev": true
         },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        },
         "is-ci": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
@@ -2395,15 +2520,53 @@
       }
     },
     "builder-util-runtime": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.2.1.tgz",
-      "integrity": "sha512-2TkeTcI9bDlK5azRZSJJNxhAgW1DK+JY3jHK0UWPxgJcan4GZSVDNNO3sXntNxrp+JAdPHMF14rzNd/G53lvqw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.2.5.tgz",
+      "integrity": "sha512-YILT+YUlxrE3yNB6mDC1tF+Q24mr1LSYdjP5U861jbBeDZfvy1/VPDzW3boMVrDtzYnDnvkYrzLJnoh6TXA75w==",
       "dev": true,
       "requires": {
-        "bluebird-lst": "^1.0.7",
+        "bluebird-lst": "^1.0.9",
         "debug": "^4.1.1",
-        "fs-extra-p": "^7.0.1",
+        "fs-extra-p": "^8.0.2",
         "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        }
       }
     },
     "builtin-status-codes": {
@@ -2483,6 +2646,44 @@
         }
       }
     },
+    "cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "dev": true,
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lowercase-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+          "dev": true
+        },
+        "normalize-url": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.3.0.tgz",
+          "integrity": "sha512-0NLtR71o4k6GLP+mr6Ty34c5GA6CMoEsncKJxvQd8NzPxaHRJNnb5gZE8R1XF4CPIS7QPHLJ74IFszwtNVAHVQ==",
+          "dev": true
+        }
+      }
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -2565,12 +2766,6 @@
       "integrity": "sha512-rUBIbap+VJfxTzrM4akJ00lkvVb5/n5v3EGXfWzSH5zT8aJmGzjA8HWhJ4U6kCpzxozUSnB+yvAYDRPY6mRpgQ==",
       "dev": true
     },
-    "capture-stack-trace": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz",
-      "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==",
-      "dev": true
-    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz",
@@ -2703,9 +2898,9 @@
       }
     },
     "cli-boxes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
-      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.0.tgz",
+      "integrity": "sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==",
       "dev": true
     },
     "cli-cursor": {
@@ -2792,6 +2987,15 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -3043,9 +3247,9 @@
       }
     },
     "configstore": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
-      "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-4.0.0.tgz",
+      "integrity": "sha512-CmquAXFBocrzaSM8mtGPMM/HiWmyIpr4CcJl/rgY2uCObZ/S7cKU0silxslqJejl+t/T9HS8E0PUNQD81JGUEQ==",
       "dev": true,
       "requires": {
         "dot-prop": "^4.1.0",
@@ -3337,15 +3541,6 @@
         "elliptic": "^6.0.0"
       }
     },
-    "create-error-class": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
-      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
-      "dev": true,
-      "requires": {
-        "capture-stack-trace": "^1.0.0"
-      }
-    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -3793,6 +3988,15 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -3830,6 +4034,12 @@
         "clone": "^1.0.2"
       }
     },
+    "defer-to-connect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.0.2.tgz",
+      "integrity": "sha512-k09hcQcTDY+cwgiwa6PYKLm3jlagNzQ+RSvhjzESOGOx+MNOuXkxTfEvPrO1IOQ81tArCFYQgi631clB70RpQw==",
+      "dev": true
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -3973,19 +4183,57 @@
       }
     },
     "dmg-builder": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-6.6.1.tgz",
-      "integrity": "sha512-aIbpQG3es+gHTFtsBQE4fmSYVM60yewxJZsN6FhkAmAmNaoO45bEQNJZsRX0YE49+imiSC92mJmFAEP6iKE0Tg==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-6.8.0.tgz",
+      "integrity": "sha512-YKPcGSpUc8L5HhZhzB2IlPm0kYCwDw4pCfOuXROjUR/EWACnUUIcYZ1suL4/AX26xAcBkh/FP1phPCzOjYy5rA==",
       "dev": true,
       "requires": {
-        "app-builder-lib": "~20.40.0",
-        "bluebird-lst": "^1.0.7",
-        "builder-util": "~9.7.1",
-        "fs-extra-p": "^7.0.1",
+        "app-builder-lib": "~21.0.0",
+        "bluebird-lst": "^1.0.9",
+        "builder-util": "~10.2.0",
+        "fs-extra-p": "^8.0.2",
         "iconv-lite": "^0.4.24",
-        "js-yaml": "^3.13.0",
+        "js-yaml": "^3.13.1",
         "parse-color": "^1.0.0",
         "sanitize-filename": "^1.6.1"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        }
       }
     },
     "dns-equal": {
@@ -4156,32 +4404,77 @@
       }
     },
     "electron-builder": {
-      "version": "20.40.2",
-      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-20.40.2.tgz",
-      "integrity": "sha512-hnnBzyLXna+WpmT4MIoWVdRli43q09yqKOgzPJj0KrOoJZ7TIoY1aYSPvSg8VL5rSuTgdAWGL4rYd9zcq3YXMQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-21.0.1.tgz",
+      "integrity": "sha512-QDY9XO3FrphEbknsSlvocYt0uWx8uP8cgI53ODvsRST+ykbckINlncGmK1KsPE8UHpYT9Ati0BYp1+2zo+ysQA==",
       "dev": true,
       "requires": {
-        "app-builder-lib": "20.40.2",
-        "bluebird-lst": "^1.0.7",
-        "builder-util": "9.7.1",
-        "builder-util-runtime": "8.2.1",
+        "app-builder-lib": "21.0.1",
+        "bluebird-lst": "^1.0.9",
+        "builder-util": "10.2.0",
+        "builder-util-runtime": "8.2.5",
         "chalk": "^2.4.2",
-        "dmg-builder": "6.6.1",
-        "fs-extra-p": "^7.0.1",
+        "dmg-builder": "6.8.0",
+        "fs-extra-p": "^8.0.2",
         "is-ci": "^2.0.0",
         "lazy-val": "^1.0.4",
-        "read-config-file": "3.2.2",
+        "read-config-file": "3.3.0",
         "sanitize-filename": "^1.6.1",
-        "update-notifier": "^2.5.0",
-        "yargs": "^13.2.2"
+        "update-notifier": "^3.0.0",
+        "yargs": "^13.2.4"
       },
       "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
         "ci-info": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
           "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
           "dev": true
         },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        },
         "is-ci": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
@@ -4190,6 +4483,70 @@
           "requires": {
             "ci-info": "^2.0.0"
           }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+          "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "yargs": {
+          "version": "13.2.4",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.4.tgz",
+          "integrity": "sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "os-locale": "^3.1.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.0"
+          }
         }
       }
     },
@@ -4297,18 +4654,62 @@
       }
     },
     "electron-publish": {
-      "version": "20.40.0",
-      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-20.40.0.tgz",
-      "integrity": "sha512-mkjtsIgftRszuT/8do8TszmddokDnu254OyTeL8nE780o/A8t68oXHZzvlTJ4AQ8uBOYrA87JDO/BFCWjnVArA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-21.0.1.tgz",
+      "integrity": "sha512-zCD/O9/Ei6uWfGvRW6iPxAAdq2tgXawRyWH2eMjk8uuwHk6gtAh3IOjKzyUHHBW4Tcu53+GLLPZnqxoiRNw38A==",
       "dev": true,
       "requires": {
-        "bluebird-lst": "^1.0.7",
-        "builder-util": "~9.7.1",
-        "builder-util-runtime": "^8.2.1",
+        "bluebird-lst": "^1.0.9",
+        "builder-util": "~10.2.0",
+        "builder-util-runtime": "^8.2.5",
         "chalk": "^2.4.2",
-        "fs-extra-p": "^7.0.1",
+        "fs-extra-p": "^8.0.2",
         "lazy-val": "^1.0.4",
-        "mime": "^2.4.1"
+        "mime": "^2.4.4"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        },
+        "mime": {
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
+          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
+          "dev": true
+        }
       }
     },
     "electron-store": {
@@ -5838,30 +6239,22 @@
       }
     },
     "got": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
       "dev": true,
       "requires": {
-        "create-error-class": "^3.0.0",
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
         "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "is-redirect": "^1.0.0",
-        "is-retry-allowed": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "lowercase-keys": "^1.0.0",
-        "safe-buffer": "^5.0.1",
-        "timed-out": "^4.0.0",
-        "unzip-response": "^2.0.1",
-        "url-parse-lax": "^1.0.0"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
-        }
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
       }
     },
     "graceful-fs": {
@@ -5970,6 +6363,12 @@
         }
       }
     },
+    "has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "dev": true
+    },
     "hash-base": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
@@ -6176,6 +6575,12 @@
         }
       }
     },
+    "http-cache-semantics": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz",
+      "integrity": "sha512-TcIMG3qeVLgDr1TEd2XvHaTnMPwYQUQMIBLy+5pLSDKYFc7UIqj39w8EGzZkaxoLv/l2K8HaI0t5AVA+YYgUew==",
+      "dev": true
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -6647,9 +7052,9 @@
       }
     },
     "is-npm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-3.0.0.tgz",
+      "integrity": "sha512-wsigDr1Kkschp2opC4G3yA6r9EgVA6NjRpWzIi9axXqeIaAATPRJc4uLujXe3Nd9uO8KoDyA4MD6aZSeXTADhA==",
       "dev": true
     },
     "is-number": {
@@ -6721,12 +7126,6 @@
       "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
       "optional": true
     },
-    "is-redirect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
-      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=",
-      "dev": true
-    },
     "is-regex": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@@ -6742,12 +7141,6 @@
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
       "dev": true
     },
-    "is-retry-allowed": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
-      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=",
-      "dev": true
-    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -6795,6 +7188,12 @@
       "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
       "dev": true
     },
+    "is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
+      "dev": true
+    },
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -6802,9 +7201,9 @@
       "dev": true
     },
     "isbinaryfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.0.tgz",
-      "integrity": "sha512-RBtmso6l2mCaEsUvXngMTIjg3oheXo0MgYzzfT6sk44RYggPnm9fT+cQJAmzRnJIxPHXg9FZglqDJGW28dvcqA==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.1.tgz",
+      "integrity": "sha512-bvJxbNWm72dy/1+qeBm9F8wUM4siDnlzid7NN5Ib4nQcc0tNIx/YWgEih1ZRHXr8xVbpGk1ccLlA9gOSlyx3gw==",
       "dev": true
     },
     "isemail": {
@@ -6899,6 +7298,12 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
+    "json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
+      "dev": true
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -6968,6 +7373,15 @@
         "verror": "1.10.0"
       }
     },
+    "keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "dev": true,
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -6981,12 +7395,12 @@
       "dev": true
     },
     "latest-version": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
-      "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
       "dev": true,
       "requires": {
-        "package-json": "^4.0.0"
+        "package-json": "^6.3.0"
       }
     },
     "launch-editor": {
@@ -7473,6 +7887,12 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true
+    },
     "mini-css-extract-plugin": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.6.0.tgz",
@@ -8077,6 +8497,12 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "optional": true
     },
+    "p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "dev": true
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -8126,15 +8552,23 @@
       "dev": true
     },
     "package-json": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz",
-      "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.4.0.tgz",
+      "integrity": "sha512-bd1T8OBG7hcvMd9c/udgv6u5v9wISP3Oyl9Cm7Weop8EFwrtcQDnS2sb6zhwqus2WslSr5wSTIPiTTpxxmPm7Q==",
       "dev": true,
       "requires": {
-        "got": "^6.7.1",
-        "registry-auth-token": "^3.0.1",
-        "registry-url": "^3.0.3",
-        "semver": "^5.1.0"
+        "got": "^9.6.0",
+        "registry-auth-token": "^3.4.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.1.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.1.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.2.tgz",
+          "integrity": "sha512-z4PqiCpomGtWj8633oeAdXm1Kn1W++3T8epkZYnwiVgIYIJ0QHszhInYSJTYxebByQH7KVCEAn8R9duzZW2PhQ==",
+          "dev": true
+        }
       }
     },
     "pako": {
@@ -9290,33 +9724,63 @@
       }
     },
     "read-config-file": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-3.2.2.tgz",
-      "integrity": "sha512-PuFpMgZF01VB0ydH1dfitAxCP/fh+qnfbA9cYNIPoxPbz0SMngsrafCtaHDWfER7MwlDz4fmrNBhPkakxxFpTg==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-3.3.0.tgz",
+      "integrity": "sha512-VzA1UVvNwEYQi9wGVa7Cji/E6YNr3VwbPXUcHed00cYoZsqg1kYcMnHgIx8nt0NQjFz/ai/8n8Xq0rmHD153Gg==",
       "dev": true,
       "requires": {
-        "ajv": "^6.9.2",
+        "ajv": "^6.10.0",
         "ajv-keywords": "^3.4.0",
-        "bluebird-lst": "^1.0.7",
-        "dotenv": "^6.2.0",
-        "dotenv-expand": "^4.2.0",
-        "fs-extra-p": "^7.0.1",
-        "js-yaml": "^3.12.1",
+        "bluebird-lst": "^1.0.9",
+        "dotenv": "^8.0.0",
+        "dotenv-expand": "^5.1.0",
+        "fs-extra-p": "^8.0.2",
+        "js-yaml": "^3.13.1",
         "json5": "^2.1.0",
         "lazy-val": "^1.0.4"
       },
       "dependencies": {
-        "dotenv": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
-          "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==",
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
           "dev": true
         },
-        "dotenv-expand": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-4.2.0.tgz",
-          "integrity": "sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=",
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
+        "dotenv": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.0.0.tgz",
+          "integrity": "sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==",
           "dev": true
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
         }
       }
     },
@@ -9509,12 +9973,12 @@
       }
     },
     "registry-url": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
       "dev": true,
       "requires": {
-        "rc": "^1.0.1"
+        "rc": "^1.2.8"
       }
     },
     "regjsgen": {
@@ -9733,6 +10197,15 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
       "dev": true
     },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "dev": true,
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
     "restore-cursor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
@@ -10752,14 +11225,52 @@
       "dev": true
     },
     "temp-file": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/temp-file/-/temp-file-3.3.2.tgz",
-      "integrity": "sha512-FGKccAW0Mux9hC/2bdUIe4bJRv4OyVo4RpVcuplFird1V/YoplIFbnPZjfzbJSf/qNvRZIRB9/4n/RkI0GziuQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/temp-file/-/temp-file-3.3.3.tgz",
+      "integrity": "sha512-ErWJ0vfZwkozaH7dn/5QtYdrGwy6fWID0GG3PEzNb9Vmt6urL4mQ3lKz7NWVi1/kmZsWQzgjTL7/P4mwGx5jqg==",
       "dev": true,
       "requires": {
         "async-exit-hook": "^2.0.1",
-        "bluebird-lst": "^1.0.6",
-        "fs-extra-p": "^7.0.0"
+        "bluebird-lst": "^1.0.9",
+        "fs-extra-p": "^8.0.2"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.5.5",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "dev": true
+        },
+        "bluebird-lst": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.9.tgz",
+          "integrity": "sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5"
+          }
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "fs-extra-p": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-8.0.2.tgz",
+          "integrity": "sha512-dpWboLA/OlyuqGQdsTjC2PKNkise3O4ptcMpXoyfeM/VXrthkEape3I+drWLI0JAW46r1D3eb6QBSPkSyXPXzA==",
+          "dev": true,
+          "requires": {
+            "bluebird-lst": "^1.0.9",
+            "fs-extra": "^8.0.1"
+          }
+        }
       }
     },
     "term-size": {
@@ -10932,12 +11443,6 @@
       "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==",
       "dev": true
     },
-    "timed-out": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
-      "dev": true
-    },
     "timers-browserify": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz",
@@ -10994,6 +11499,12 @@
         }
       }
     },
+    "to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "dev": true
+    },
     "to-regex": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
@@ -11330,12 +11841,6 @@
         "path-exists": "^3.0.0"
       }
     },
-    "unzip-response": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
-      "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=",
-      "dev": true
-    },
     "upath": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
@@ -11343,21 +11848,40 @@
       "dev": true
     },
     "update-notifier": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.5.0.tgz",
-      "integrity": "sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-3.0.0.tgz",
+      "integrity": "sha512-6Xe3oF2bvuoj4YECUc52yxVs94yWrxwqHbzyveDktTS1WhnlTRpNcQMxUshcB7nRVGi1jEXiqL5cW1S5WSyzKg==",
       "dev": true,
       "requires": {
-        "boxen": "^1.2.1",
+        "boxen": "^3.0.0",
         "chalk": "^2.0.1",
-        "configstore": "^3.0.0",
+        "configstore": "^4.0.0",
+        "has-yarn": "^2.1.0",
         "import-lazy": "^2.1.0",
-        "is-ci": "^1.0.10",
+        "is-ci": "^2.0.0",
         "is-installed-globally": "^0.1.0",
-        "is-npm": "^1.0.0",
-        "latest-version": "^3.0.0",
+        "is-npm": "^3.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.0.0",
         "semver-diff": "^2.0.0",
         "xdg-basedir": "^3.0.0"
+      },
+      "dependencies": {
+        "ci-info": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+          "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+          "dev": true
+        },
+        "is-ci": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+          "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+          "dev": true,
+          "requires": {
+            "ci-info": "^2.0.0"
+          }
+        }
       }
     },
     "upper-case": {
@@ -11433,20 +11957,12 @@
       }
     },
     "url-parse-lax": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
       "dev": true,
       "requires": {
-        "prepend-http": "^1.0.1"
-      },
-      "dependencies": {
-        "prepend-http": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
-          "dev": true
-        }
+        "prepend-http": "^2.0.0"
       }
     },
     "use": {
@@ -12049,9 +12565,9 @@
       "dev": true
     },
     "write-file-atomic": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.2.tgz",
-      "integrity": "sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+      "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.11",
diff --git a/package.json b/package.json
index d20e99c9..deb07feb 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "axios": "^0.18.0",
     "css-loader": "^2.1.1",
     "electron": "^4.1.4",
-    "electron-builder": "^20.39.0",
+    "electron-builder": "^21.0.1",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
     "uikit": "^3.1.1",

From 463bec6e1802c6b504f23eda51249932228e844c Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 26 Jun 2019 14:40:07 +0100
Subject: [PATCH 88/90] Added new generic field components

---
 .../controlComponents/paneCapture.vue         | 76 ++++---------------
 .../fieldComponents/checkList.vue             |  0
 .../fieldComponents/htmlBlock.vue             |  0
 src/components/fieldComponents/keyvalList.vue | 71 +++++++++++++++++
 .../fieldComponents/numberInput.vue           |  0
 .../fieldComponents/radioList.vue             |  0
 .../fieldComponents/selectList.vue            |  0
 src/components/fieldComponents/tagList.vue    | 63 +++++++++++++++
 .../fieldComponents/textInput.vue             |  0
 src/components/panelLeft.vue                  |  2 +-
 .../{formComponents => }/JsonForm.vue         | 18 +++--
 11 files changed, 159 insertions(+), 71 deletions(-)
 rename src/components/{pluginComponents/formComponents => }/fieldComponents/checkList.vue (100%)
 rename src/components/{pluginComponents/formComponents => }/fieldComponents/htmlBlock.vue (100%)
 create mode 100644 src/components/fieldComponents/keyvalList.vue
 rename src/components/{pluginComponents/formComponents => }/fieldComponents/numberInput.vue (100%)
 rename src/components/{pluginComponents/formComponents => }/fieldComponents/radioList.vue (100%)
 rename src/components/{pluginComponents/formComponents => }/fieldComponents/selectList.vue (100%)
 create mode 100644 src/components/fieldComponents/tagList.vue
 rename src/components/{pluginComponents/formComponents => }/fieldComponents/textInput.vue (100%)
 rename src/components/pluginComponents/{formComponents => }/JsonForm.vue (91%)

diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index 8c4bcac1..f047231f 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -42,22 +42,7 @@
         <a class="uk-accordion-title" href="#">Metadata</a>
         <div class="uk-accordion-content">
 
-          <form @submit.prevent="handleMetadataSubmit">
-            <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-flex uk-flex-middle">
-            <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ value }}</div>
-            <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
-          </div>
+          <keyvalList v-model="metadata"/>
 
         </div>
       </li>
@@ -65,23 +50,7 @@
       <li>
         <a class="uk-accordion-title" href="#">Tags</a>
         <div class="uk-accordion-content">
-
-          <form @submit.prevent="handleTagSubmit">
-            <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>
-
-          <span v-for="tag in tags" :key="tag" v-on:click="delTag(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
-
+          <tagList v-model="tags"/>
         </div>
       </li>
 
@@ -185,10 +154,19 @@
 <script>
 import axios from 'axios'
 
+import tagList from "../fieldComponents/tagList"
+import keyvalList from "../fieldComponents/keyvalList"
+
 // Export main app
 export default {
   name: 'paneCapture',
 
+  components: {
+    tagList,
+    keyvalList
+  },
+
+
   data: function () {
     return {
       filename: '',
@@ -212,42 +190,14 @@ export default {
         z: 5
       },
       resizeDims: [640, 480],
-      newTag: "",
       tags: [],
-      customMetadata: {
+      metadata: {
         Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
-      },
-      newMetadata: {
-        key: "",
-        value: ""
       }
     }
   },
 
   methods: {
-    handleMetadataSubmit: function () {
-      console.log("Adding metadata");
-      this.customMetadata[this.newMetadata.key] = this.newMetadata.value
-      this.newMetadata.key = "";
-      this.newMetadata.value = "";
-    },
-
-    delMetadataKey: function (key) {
-      this.$delete(this.customMetadata, key)
-    },
-
-    handleTagSubmit: function () {
-      this.tags.push(this.newTag)
-      this.newTag = "";
-    },
-
-    delTag: function (tag) {
-      console.log(tag)
-      var index = this.tags.indexOf(tag);
-      if (index > -1) {
-        this.tags.splice(index, 1);
-      }
-    },
 
     handleCapture: function() {
       var payload = this.basePayload
@@ -345,7 +295,7 @@ export default {
       }
 
       // Additional metadata
-      payload.metadata = this.customMetadata
+      payload.metadata = this.metadata
       payload.tags = this.tags
 
       // Attach notes
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/checkList.vue b/src/components/fieldComponents/checkList.vue
similarity index 100%
rename from src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
rename to src/components/fieldComponents/checkList.vue
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue b/src/components/fieldComponents/htmlBlock.vue
similarity index 100%
rename from src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
rename to src/components/fieldComponents/htmlBlock.vue
diff --git a/src/components/fieldComponents/keyvalList.vue b/src/components/fieldComponents/keyvalList.vue
new file mode 100644
index 00000000..4593104e
--- /dev/null
+++ b/src/components/fieldComponents/keyvalList.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <form @submit.prevent="handleMetadataSubmit">
+      <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="(val, key) in value" :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>{{ val }}</div>
+      <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
+    </div>
+  
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'keyvalList',
+
+  data: function () {
+    return {
+      newMetadata: {
+        key: "",
+        value: ""
+      }
+    }
+  },
+
+  props: [
+    'value'
+  ],
+
+  methods: {
+    handleMetadataSubmit: function () {
+      var newSelected = {}
+
+      if (this.value != null) {
+        Object.assign(newSelected, this.value)
+      }
+
+      newSelected[this.newMetadata.key] = this.newMetadata.value
+      this.newMetadata.key = "";
+      this.newMetadata.value = "";
+
+      this.$emit('input', newSelected)
+    },
+
+    delMetadataKey: function (key) {
+      var newSelected = {}
+
+      if (this.value != null) {
+        Object.assign(newSelected, this.value)
+      }
+
+      this.$delete(newSelected, key)
+
+      this.$emit('input', newSelected)
+    },
+
+  }
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue b/src/components/fieldComponents/numberInput.vue
similarity index 100%
rename from src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
rename to src/components/fieldComponents/numberInput.vue
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/radioList.vue b/src/components/fieldComponents/radioList.vue
similarity index 100%
rename from src/components/pluginComponents/formComponents/fieldComponents/radioList.vue
rename to src/components/fieldComponents/radioList.vue
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/selectList.vue b/src/components/fieldComponents/selectList.vue
similarity index 100%
rename from src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
rename to src/components/fieldComponents/selectList.vue
diff --git a/src/components/fieldComponents/tagList.vue b/src/components/fieldComponents/tagList.vue
new file mode 100644
index 00000000..59f27534
--- /dev/null
+++ b/src/components/fieldComponents/tagList.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+
+    <form @submit.prevent="handleTagSubmit">
+      <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>
+
+    <span v-for="tag in value" :key="tag" v-on:click="delTag(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tagList',
+
+  data: function () {
+    return {
+      newTag: ""
+    }
+  },
+
+  props: [
+    'value'
+  ],
+
+  methods: {
+    handleTagSubmit: function () {
+      var newSelected = this.value != null ? [...this.value] : []  // Clone value array
+
+      newSelected.push(this.newTag)
+      this.newTag = "";
+
+      this.$emit('input', newSelected)
+    },
+
+    delTag: function (tag) {
+      var newSelected = this.value != null ? [...this.value] : []  // Clone value array
+
+      if (newSelected.includes(tag)) {
+        var newSelected = newSelected.filter(function(value, index, arr){
+            return value != tag;
+        })
+      }
+
+      this.$emit('input', newSelected)
+    }
+
+  }
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/pluginComponents/formComponents/fieldComponents/textInput.vue b/src/components/fieldComponents/textInput.vue
similarity index 100%
rename from src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
rename to src/components/fieldComponents/textInput.vue
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 8dd9f8c1..1249b12c 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -85,7 +85,7 @@ import paneCapture from './controlComponents/paneCapture'
 import paneSettings from './controlComponents/paneSettings'
 
 // Import plugin components
-import JsonForm from './pluginComponents/formComponents/JsonForm'
+import JsonForm from './pluginComponents/JsonForm'
 
 // Export main app
 export default {
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/JsonForm.vue
similarity index 91%
rename from src/components/pluginComponents/formComponents/JsonForm.vue
rename to src/components/pluginComponents/JsonForm.vue
index afc4ebf3..1364419c 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/JsonForm.vue
@@ -41,14 +41,16 @@
 <script>
 import axios from 'axios'
 
-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"
+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"
+import tagList from "../fieldComponents/tagList"
+import keyvalList from "../fieldComponents/keyvalList"
 
-import progressBar from "../../genericComponents/progressBar"
+import progressBar from "../genericComponents/progressBar"
 
 export default {
   name: 'JsonForm',
@@ -60,6 +62,8 @@ export default {
     htmlBlock,
     radioList,
     checkList,
+    tagList,
+    keyvalList,
     progressBar
   },
 

From b698f50e483214f6e355fbf525b2497dc4e11e45 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 26 Jun 2019 15:21:00 +0100
Subject: [PATCH 89/90] Metadata values can be edited once added

---
 src/components/fieldComponents/keyvalList.vue | 15 ++++-
 src/components/fieldComponents/labelInput.vue | 58 +++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/components/fieldComponents/labelInput.vue

diff --git a/src/components/fieldComponents/keyvalList.vue b/src/components/fieldComponents/keyvalList.vue
index 4593104e..c72e7f84 100644
--- a/src/components/fieldComponents/keyvalList.vue
+++ b/src/components/fieldComponents/keyvalList.vue
@@ -13,7 +13,9 @@
     </form>
 
     <div v-for="(val, key) in value" :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>{{ val }}</div>
+      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
+        <labelInput :label="key" :value="value[key]" @input="value[key]=$event"/> 
+      </div>
       <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
     </div>
   
@@ -21,9 +23,15 @@
 </template>
 
 <script>
+import labelInput from "../fieldComponents/labelInput"
+
 export default {
   name: 'keyvalList',
 
+  components: {
+    labelInput
+  },
+
   data: function () {
     return {
       newMetadata: {
@@ -64,6 +72,11 @@ export default {
       this.$emit('input', newSelected)
     },
 
+    modifyValue: function (e, v) {
+      console.log(e)
+      console.log(v)
+    }
+
   }
 }
 </script>
diff --git a/src/components/fieldComponents/labelInput.vue b/src/components/fieldComponents/labelInput.vue
new file mode 100644
index 00000000..0011d572
--- /dev/null
+++ b/src/components/fieldComponents/labelInput.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <label class="uk-form-label uk-text-bold">{{label}}</label>
+
+    <div @click="setEditing(true)" uk-tooltip="title: Click to edit value; delay: 250">
+
+      <div v-show="editing == false">
+        <label> {{value}} </label>
+      </div>
+
+      <input
+        v-show="editing == true"
+        class="uk-input uk-form-small"
+        type="text"
+        v-bind:name="name"
+        v-bind:value="value"
+        ref="textinput"
+        v-on:blur= "setEditing(false)"
+        @keyup.enter = "setEditing(false)"
+        @input="$emit('input', $event.target.value)"
+        autofocus
+      >
+    </div>
+
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'labelInput',
+
+  data: function () {
+    return {
+      editing: false
+    }
+  },
+
+  props: [
+    'name',
+    'label',
+    'value'
+  ],
+
+  methods: {
+    setEditing(editing) {
+      this.editing = editing
+      if (editing == true) {
+        this.$nextTick(() => this.$refs.textinput.focus())
+      }
+    }
+  },
+
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file

From 66683fc7a032761d415f6c67be51d0164ba75672 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 4 Jul 2019 10:36:48 +0100
Subject: [PATCH 90/90] Iterated version to 1.1.0

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

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