Merge branch 'guided-tour' into 'master'

Guided tour

See merge request openflexure/openflexure-microscope-jsclient!46

package-lock.json

@@ -10514,6 +10514,12 @@
         "verror": "1.10.0"
       }
     },
+    "jump.js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/jump.js/-/jump.js-1.0.2.tgz",
+      "integrity": "sha1-4GQbR/QKOPITnCX9oFAL8o5DAVo=",
+      "dev": true
+    },
     "kew": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
@@ -12314,6 +12320,12 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "dev": true
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -16064,6 +16076,18 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-tour": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-tour/-/vue-tour-1.3.0.tgz",
+      "integrity": "sha512-hLXA8vCCWNNjvXwEbfOagcZfJMz1a9Xi7LTN5nb/Nqpuv8RKT25dS5/HJBvHEEh1EoYQNOwohx1YA6x+2KTQbQ==",
+      "dev": true,
+      "requires": {
+        "hash-sum": "^2.0.0",
+        "jump.js": "^1.0.2",
+        "popper.js": "^1.16.0",
+        "vue": "^2.6.10"
+      }
+    },
     "vuex": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",

package.json

@@ -55,6 +55,7 @@
     "vue": "^2.6.11",
     "vue-plugin-load-script": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
+    "vue-tour": "^1.3.0",
     "vuex": "^3.1.2"
   },
   "optionalDependencies": {

src/App.vue

@@ -4,13 +4,20 @@
     class="uk-height-1-1 uk-margin-remove uk-padding-remove"
     :class="handleTheme"
   >
-    <panelLeft />
+    <div id="tour-header"></div>
+    <appContent />
+    <v-tour
+      name="guidedTour"
+      :steps="tourSteps"
+      :callbacks="tourCallbacks"
+      :options="{ highlight: true }"
+    ></v-tour>
   </div>
 </template>
 
 <script>
 // Import components
-import panelLeft from "./components/panelLeft.vue";
+import appContent from "./components/appContent.vue";
 
 // Key Codes
 const keyCodes = {
@@ -22,7 +29,8 @@ const keyCodes = {
   down: 40,
   enter: 13,
   esc: 27,
-  shift: 16
+  shift: 16,
+  t: 84
 };
 
 // Export main app
@@ -30,14 +38,87 @@ export default {
   name: "App",
 
   components: {
-    panelLeft
+    appContent
   },
 
   data: function() {
     return {
       keysDown: {},
       systemDark: undefined,
-      themeObserver: undefined
+      themeObserver: undefined,
+      tourSteps: [
+        {
+          target: "#tour-header", // We're using document.querySelector() under the hood
+          header: {
+            title: "Welcome to OpenFlexure eV"
+          },
+          content: `Click Next to learn how to use OpenFlexure eV`,
+          params: {
+            placement: "bottom"
+          }
+        },
+        {
+          target: "#saved-connections-grid",
+          header: {
+            title: "Saved microscopes"
+          },
+          content: `Connect to your saved microscopes for faster access`
+        },
+        {
+          target: "#nearby-connections-grid",
+          header: {
+            title: "Nearby microscopes"
+          },
+          content: `Connect to microscopes found on your network`
+        },
+        {
+          target: "#new-connection-card",
+          header: {
+            title: "New connection"
+          },
+          content: `Connect locally if you're running on a microscope, \nor open a new remote connection to a microscope`
+        },
+        {
+          target: "#gallery-tab-icon",
+          header: {
+            title: "Capture gallery"
+          },
+          content: `View and download your microscope images from the gallery tab`
+        },
+        {
+          target: "#navigate-tab-icon",
+          header: {
+            title: "Navigate around your sample"
+          },
+          content: `Move your microscope stage and perform autofocus from the navigate tab`
+        },
+        {
+          target: "#capture-tab-icon",
+          header: {
+            title: "Capture microscope images"
+          },
+          content: `Take images and simple tile scans from the capture tab`
+        },
+        {
+          target: "#settings-tab-icon",
+          header: {
+            title: "Change settings"
+          },
+          content: `Change app and microscope settings, including microscope calibration, from the settings tab`
+        },
+        {
+          target: "#extension-tab-divider",
+          header: {
+            title: "Microscope extensions"
+          },
+          content: `Extensions installed on your microscope will appear below this line`
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.setLocalStorageObj("completedTour", true);
+        }
+      }
     };
   },
 
@@ -86,6 +167,12 @@ export default {
         this.systemDark = false;
       }
     });
+    // Handle guided tour
+    // If the user has already completed or skipped the guided tour
+    var completedTour = this.getLocalStorageObj("completedTour") || false;
+    if (!completedTour) {
+      this.$tours["guidedTour"].start();
+    }
   },
 
   created: function() {
@@ -144,6 +231,7 @@ export default {
       ) {
         this.navigateKeyHandler(keyCodes);
         this.captureKeyHandler(keyCodes);
+        this.letterKeyHandler(keyCodes);
       }
     },
 
@@ -197,6 +285,12 @@ export default {
         console.log("Capturing");
         this.$root.$emit("globalCaptureEvent");
       }
+    },
+
+    letterKeyHandler: function(keyCodes) {
+      if (keyCodes.shift in this.keysDown && keyCodes.t in this.keysDown) {
+        this.$tours["guidedTour"].start();
+      }
     }
   }
 };
@@ -252,4 +346,56 @@ html {
   height: 100%;
   padding: 0;
 }
+
+// Style tour
+.v-tour__target--highlighted {
+  box-shadow: 0px 0px 180px 40px rgba(0, 0, 0, 0.4) !important;
+  border-radius: 5px;
+  opacity: 100%;
+}
+
+.v-step {
+  background: @global-primary-background !important;
+}
+
+.v-step__header {
+  background-color: darken(@global-primary-background, 15%) !important;
+}
+
+.v-step__button {
+  font-size: 0.9rem !important;
+}
+
+// Change step arrow colour
+// This is awful and hacky and makes me sad, but needs must
+.v-step .v-step__arrow {
+  border-color: darken(@global-primary-background, 15%) !important;
+  &--dark {
+    border-color: darken(@global-primary-background, 15%) !important;
+  }
+}
+
+.v-step[x-placement^="top"] .v-step__arrow {
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-step[x-placement^="bottom"] .v-step__arrow {
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+}
+
+.v-step[x-placement^="right"] .v-step__arrow {
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-step[x-placement^="left"] .v-step__arrow {
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
 </style>

src/components/appContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    id="panel-left"
+    id="app-content"
     class="uk-margin-remove uk-padding-remove uk-height-1-1"
     uk-grid
   >
@@ -11,7 +11,8 @@
     >
       <tabIcon
         v-show="!liteMode"
-        id="connect"
+        id="connect-tab-icon"
+        tab-i-d="connect"
         :require-connection="false"
         :current-tab="currentTab"
         @set-tab="setTab"
@@ -19,7 +20,8 @@
         <i class="material-icons">bug_report</i>
       </tabIcon>
       <tabIcon
-        id="gallery"
+        id="gallery-tab-icon"
+        tab-i-d="gallery"
         :require-connection="true"
         :current-tab="currentTab"
         @set-tab="setTab"
@@ -30,7 +32,8 @@
       <hr />
 
       <tabIcon
-        id="navigate"
+        id="navigate-tab-icon"
+        tab-i-d="navigate"
         :require-connection="true"
         :current-tab="currentTab"
         @set-tab="setTab"
@@ -38,7 +41,8 @@
         <i class="material-icons">gamepad</i>
       </tabIcon>
       <tabIcon
-        id="capture"
+        id="capture-tab-icon"
+        tab-i-d="capture"
         :require-connection="true"
         :current-tab="currentTab"
         @set-tab="setTab"
@@ -46,7 +50,8 @@
         <i class="material-icons">camera_alt</i>
       </tabIcon>
       <tabIcon
-        id="settings"
+        id="settings-tab-icon"
+        tab-i-d="settings"
         :require-connection="false"
         :current-tab="currentTab"
         @set-tab="setTab"
@@ -54,12 +59,12 @@
         <i class="material-icons">settings</i>
       </tabIcon>
 
-      <hr />
+      <hr id="extension-tab-divider" />
 
       <tabIcon
         v-for="plugin in pluginsGuiList"
-        :id="plugin.id"
         :key="plugin.id"
+        :tab-i-d="plugin.id"
         :title="plugin.title"
         :require-connection="plugin.requiresConnection"
         :current-tab="currentTab"
@@ -76,35 +81,35 @@
       class="uk-padding-remove uk-height-1-1 uk-width-expand"
     >
       <tabContent
-        id="connect"
+        tab-i-d="connect"
         :require-connection="false"
         :current-tab="currentTab"
       >
         <connectContent />
       </tabContent>
       <tabContent
-        id="gallery"
+        tab-i-d="gallery"
         :require-connection="false"
         :current-tab="currentTab"
       >
         <galleryContent />
       </tabContent>
       <tabContent
-        id="navigate"
+        tab-i-d="navigate"
         :require-connection="true"
         :current-tab="currentTab"
       >
         <navigateContent />
       </tabContent>
       <tabContent
-        id="capture"
+        tab-i-d="capture"
         :require-connection="true"
         :current-tab="currentTab"
       >
         <captureContent />
       </tabContent>
       <tabContent
-        id="settings"
+        tab-i-d="settings"
         :require-connection="false"
         :current-tab="currentTab"
       >
@@ -113,8 +118,8 @@
 
       <tabContent
         v-for="plugin in pluginsGuiList"
-        :id="plugin.id"
         :key="plugin.id"
+        :tab-i-d="plugin.id"
         :require-connection="plugin.requiresConnection"
         :current-tab="currentTab"
       >
@@ -204,6 +209,8 @@ export default {
     );
   },
 
+  mounted: function() {},
+
   beforeDestroy() {
     // Then we call that function here to unwatch
     if (this.unwatchStoreFunction) {

src/components/genericComponents/tabContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!(requireConnection && !$store.getters.ready)"
-    :hidden="currentTab != id"
+    :hidden="currentTab != tabID"
     class="uk-width-expand uk-height-1-1"
   >
     <div class="section-content"><slot></slot></div>
@@ -13,7 +13,7 @@ export default {
   name: "TabContent",
 
   props: {
-    id: {
+    tabID: {
       type: String,
       required: true
     },

src/components/genericComponents/tabIcon.vue

@@ -18,7 +18,7 @@ export default {
   name: "TabIcon",
 
   props: {
-    id: {
+    tabID: {
       type: String,
       required: true
     },
@@ -45,7 +45,7 @@ export default {
         return this.title;
       } else {
         // Get the last section of a fully qualified name
-        var topName = this.id.split(".").pop();
+        var topName = this.tabID.split(".").pop();
         // Make first character uppercase, then add the rest of the string
         return topName.charAt(0).toUpperCase() + topName.slice(1);
       }
@@ -57,7 +57,7 @@ export default {
 
     classObject: function() {
       return {
-        "tabicon-active": this.currentTab == this.id,
+        "tabicon-active": this.currentTab == this.tabID,
         "uk-disabled": this.requireConnection && !this.$store.getters.ready
       };
     }
@@ -65,7 +65,7 @@ export default {
 
   methods: {
     setThisTab(event) {
-      this.$emit("set-tab", event, this.id);
+      this.$emit("set-tab", event, this.tabID);
       if (this.clickCallback) {
         this.clickCallback();
       }

src/components/panelRight.vue

@@ -1,170 +0,0 @@
-<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
-      id="tabContainer"
-      class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center"
-      uk-tab="swiping: false"
-    >
-      <!-- Connect tab button -->
-      <li
-        v-show="!liteMode"
-        :class="[{ 'uk-active': currentTab == 'connect' }]"
-      >
-        <a href="#" uk-switcher-item="connect" @click="currentTab = 'connect'"
-          >Connect</a
-        >
-      </li>
-      <!-- Preview tab button -->
-      <li
-        :class="[
-          { 'uk-disabled': !$store.getters.ready },
-          { 'uk-active': currentTab == 'preview' }
-        ]"
-      >
-        <a href="#" uk-switcher-item="preview" @click="currentTab = 'preview'"
-          >Live</a
-        >
-      </li>
-      <!-- Gallery tab button -->
-      <li
-        :class="[
-          { 'uk-disabled': !$store.getters.ready },
-          { 'uk-active': currentTab == 'gallery' }
-        ]"
-      >
-        <a href="#" uk-switcher-item="gallery" @click="currentTab = 'gallery'"
-          >Gallery</a
-        >
-      </li>
-    </ul>
-    <ul
-      class="uk-flex uk-flex-1 uk-overflow-auto uk-margin-remove uk-padding-remove"
-    >
-      <!-- Connect tab -->
-      <div
-        v-show="currentTab == 'connect'"
-        id="connectDisplayTab"
-        class="uk-height-1-1 uk-width-1-1"
-      >
-        <connectDisplayLite v-if="liteMode" />
-        <connectDisplay v-else />
-      </div>
-      <!-- Preview tab -->
-      <div
-        v-if="$store.getters.ready"
-        v-show="currentTab == 'preview'"
-        id="streamDisplayTab"
-        class="uk-height-1-1 uk-width-1-1"
-      >
-        <streamDisplay />
-      </div>
-      <!-- Gallery tab -->
-      <div
-        v-if="$store.getters.ready"
-        v-show="currentTab == 'gallery'"
-        id="galleryDisplayTab"
-        class="uk-height-1-1 uk-width-1-1"
-      >
-        <galleryDisplay />
-      </div>
-    </ul>
-  </div>
-</template>
-
-<script>
-// Import basic UIkit
-import UIkit from "uikit";
-
-// Import components
-import connectDisplay from "./viewComponents/connectDisplay.vue";
-import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
-import streamDisplay from "./viewComponents/streamDisplay.vue";
-import galleryDisplay from "./viewComponents/galleryDisplay.vue";
-
-// Export main app
-export default {
-  name: "PanelRight",
-
-  components: {
-    connectDisplay,
-    connectDisplayLite,
-    streamDisplay,
-    galleryDisplay
-  },
-
-  data: function() {
-    return {
-      currentTab: "connect",
-      unwatchStoreFunction: null,
-      liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false
-    };
-  },
-
-  watch: {
-    currentTab: function(index) {
-      // If entering the gallery
-      if (index == "gallery") {
-        console.log("Gallery tab entered");
-        this.$root.$emit("globalUpdateCaptures");
-      }
-      // If entering the stream
-      if (index == "preview") {
-        console.log("Preview tab entered");
-        this.$root.$emit("globalTogglePreview", true);
-      }
-      // If leaving the stream
-      else {
-        console.log("Preview tab hidden");
-        this.$root.$emit("globalTogglePreview", false);
-      }
-    }
-  },
-
-  created: function() {
-    // Watch for host 'ready', then update status
-    this.unwatchStoreFunction = this.$store.watch(
-      (state, getters) => {
-        return getters.ready;
-      },
-      ready => {
-        if (ready) {
-          console.log("Right panel now ready");
-          this.currentTab = "preview";
-        } else {
-          console.log("Right panel now disabled");
-          this.currentTab = "connect";
-        }
-      }
-    );
-  },
-
-  beforeDestroy() {
-    // Then we call that function here to unwatch
-    if (this.unwatchStoreFunction) {
-      this.unwatchStoreFunction();
-      this.unwatchStoreFunction = null;
-    }
-  },
-
-  methods: {
-    switchTab: function(index) {
-      var switcherObj = UIkit.switcher("#tabContainer");
-      console.log(switcherObj);
-      console.log(switcherObj.toggles);
-      console.log(`Switching to ${index}`);
-      var a = switcherObj.show(index);
-      console.log(a);
-    }
-  }
-};
-</script>
-
-<style scoped lang="less">
-.uk-tab {
-  padding-left: 0;
-}
-</style>

src/components/viewComponents/connectDisplay.vue

@@ -7,6 +7,7 @@
     >
       <div class="uk-width-auto">
         <div
+          id="new-connection-card"
           class="uk-card uk-card-default uk-padding-remove uk-width-medium connect-card-align-top"
         >
           <div class="uk-card-body uk-padding-small">
@@ -97,7 +98,11 @@
           <li class="uk-open">
             <a class="uk-accordion-title" href="#">Saved devices</a>
             <div class="uk-accordion-content">
-              <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
+              <div
+                id="saved-connections-grid"
+                class="uk-grid-medium uk-grid-match uk-margin-top"
+                uk-grid
+              >
                 <div v-for="host in savedHosts" :key="host.name">
                   <hostCard
                     :name="host.name"
@@ -114,7 +119,11 @@
           <li class="uk-open">
             <a class="uk-accordion-title" href="#">Nearby devices</a>
             <div class="uk-accordion-content">
-              <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
+              <div
+                id="nearby-connections-grid"
+                class="uk-grid-medium uk-grid-match uk-margin-top"
+                uk-grid
+              >
                 <div v-for="host in foundHostArray" :key="host.name">
                   <hostCard
                     :name="host.name"

src/main.js

@@ -1,16 +1,21 @@
 import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
-
 import UIkit from "uikit";
+import VueTour from "vue-tour";
+import LoadScript from "vue-plugin-load-script";
+
+require("vue-tour/dist/vue-tour.css");
 
 // Import MD icons
 import "material-design-icons/iconfont/material-icons.css";
 
-// Import load-script module
+// Use load-script module
-import LoadScript from "vue-plugin-load-script";
 Vue.use(LoadScript);
 
+// Use vue-tour module
+Vue.use(VueTour);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({