Added guided tour on first start (72c30f71) · Commits · OpenFlexure / openflexure-microscope-server

package-lock.json

+24 −0

Original line number	Diff line number	Diff line
		@@ -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

+1 −0

Original line number	Diff line number	Diff line
		@@ -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

+139 −1

Original line number	Diff line number	Diff line
		@@ -4,7 +4,14 @@
		class="uk-height-1-1 uk-margin-remove uk-padding-remove"
		:class="handleTheme"
		>
		<div id="tour-header"></div>
		<appContent />
		<v-tour
		name="guidedTour"
		:steps="tourSteps"
		:callbacks="tourCallbacks"
		:options="{ highlight: true }"
		></v-tour>
		</div>
		</template>

		@@ -37,7 +44,80 @@ export default {
		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 +166,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() {
		@@ -252,4 +338,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

+21 −14

Original line number	Diff line number	Diff line
		<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

+2 −2

Original line number	Diff line number	Diff line
		<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
		},