Added capture to global keyboard shortcuts (c5fa0dec) · Commits · OpenFlexure / openflexure-microscope-server

src/App.vue

+109 −1

Original line number	Diff line number	Diff line
		@@ -12,6 +12,19 @@
		// Import components
		import panelLeft from "./components/panelLeft.vue";

		// Key Codes
		const keyCodes = {
		pgup: 33,
		pgdn: 34,
		left: 37,
		up: 38,
		right: 39,
		down: 40,
		enter: 13,
		esc: 27,
		shift: 16
		};

		// Export main app
		export default {
		name: "App",
		@@ -22,6 +35,7 @@ export default {

		data: function() {
		return {
		keysDown: {},
		systemDark: undefined,
		themeObserver: undefined
		};
		@@ -76,6 +90,10 @@ export default {

		created: function() {
		window.addEventListener("beforeunload", this.handleExit);
		// Key events
		window.addEventListener("keydown", this.keyDownMonitor);
		window.addEventListener("keyup", this.keyUpMonitor);
		window.addEventListener("wheel", this.wheelMonitor);
		},

		beforeDestroy: function() {
		@@ -83,12 +101,102 @@ export default {
		if (this.themeObserver) {
		this.themeObserver.disconnect();
		}
		// Remove key listeners
		window.removeEventListener("keydown", this.keyDownMonitor);
		window.removeEventListener("keyup", this.keyUpMonitor);
		window.removeEventListener("wheel", this.wheelMonitor);
		},

		methods: {
		handleExit: function() {
		console.log("Triggered beforeunload");
		this.$root.$emit("globalTogglePreview", false);
		},

		// Handle global mouse wheel events to be associated with navigation
		wheelMonitor: function(event) {
		// Only capture scroll if the event target's parent contains the "scrollTarget" class
		if (
		event.target.parentNode.classList.contains("scrollTarget") \|\|
		event.target.classList.contains("scrollTarget")
		) {
		var z_rel = event.deltaY / 100;
		// Emit a signal to move, acted on by panelNavigate.vue
		this.$root.$emit("globalMoveStepEvent", 0, 0, z_rel, false);
		}
		},

		// Handle global key press events to be associated with navigation
		keyDownMonitor: function(event) {
		this.keysDown[event.keyCode] = true; //Add key to array

		// Convert keyCode dict into a list of key codes
		var keyCodeList = Object.keys(keyCodes).map(function(key) {
		return keyCodes[key];
		});

		if (
		// If not inside an element we want to ignore
		!(event.target instanceof HTMLInputElement) &&
		!event.target.classList.contains("lightbox-link") &&
		// If it's a recognised key
		keyCodeList.includes(event.keyCode)
		) {
		this.navigateKeyHandler(keyCodes);
		this.captureKeyHandler(keyCodes);
		}
		},

		keyUpMonitor: function(event) {
		delete this.keysDown[event.keyCode]; //Remove key from array
		},

		navigateKeyHandler: function(keyCodes) {
		const moveKeys = [
		keyCodes.left,
		keyCodes.right,
		keyCodes.up,
		keyCodes.down,
		keyCodes.pgup,
		keyCodes.pgdn
		];

		if (
		moveKeys.some(r => Object.keys(this.keysDown).includes(r.toString()))
		) {
		// Calculate movement array
		var x_rel = 0;
		var y_rel = 0;
		var z_rel = 0;
		if (keyCodes.left in this.keysDown) {
		x_rel = x_rel + 1;
		}
		if (keyCodes.right in this.keysDown) {
		x_rel = x_rel - 1;
		}
		if (keyCodes.up in this.keysDown) {
		y_rel = y_rel + 1;
		}
		if (keyCodes.down in this.keysDown) {
		y_rel = y_rel - 1;
		}
		if (keyCodes.pgup in this.keysDown) {
		z_rel = z_rel - 1;
		}
		if (keyCodes.pgdn in this.keysDown) {
		z_rel = z_rel + 1;
		}
		// Make a position request
		// Emit a signal to move, acted on by panelNavigate.vue
		this.$root.$emit("globalMoveStepEvent", x_rel, y_rel, z_rel);
		}
		},

		captureKeyHandler: function(keyCodes) {
		if (keyCodes.shift in this.keysDown && keyCodes.enter in this.keysDown) {
		console.log("Capturing");
		this.$root.$emit("globalCaptureEvent");
		}
		}
		}
		};
		@@ -132,7 +240,7 @@ html {
		width: 300px;
		height: 100%;
		padding: 0;
		background-color: rgba(180, 180, 180, 0.055);
		background-color: rgba(180, 180, 180, 0.03);
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: rgba(180, 180, 180, 0.25);

src/components/controlComponents/paneCapture.vue

+4 −0

Original line number	Diff line number	Diff line
		@@ -382,6 +382,10 @@ export default {
		mounted() {
		this.updateScanUri();
		this.updateScanStepSize();
		// A global signal listener to perform a capture action
		this.$root.$on("globalCaptureEvent", () => {
		this.handleCapture();
		});
		},

		methods: {

src/components/controlComponents/paneNavigate.vue

+8 −84

Original line number	Diff line number	Diff line
		@@ -156,18 +156,6 @@
		import axios from "axios";
		import taskSubmitter from "../genericComponents/taskSubmitter";

		// Key Codes
		const keyCodes = {
		pgup: 33,
		pgdn: 34,
		left: 37,
		up: 38,
		right: 39,
		down: 40,
		enter: 13,
		esc: 27
		};

		// Export main app
		export default {
		name: "PaneNavigate",
		@@ -178,7 +166,6 @@ export default {

		data: function() {
		return {
		keysDown: {},
		stepXy: 200,
		stepZz: 50,
		setPosition: null,
		@@ -204,17 +191,19 @@ export default {
		}
		},

		created: function() {
		window.addEventListener("keydown", this.keyDownMonitor);
		window.addEventListener("keyup", this.keyUpMonitor);
		window.addEventListener("wheel", this.wheelMonitor);
		},

		mounted() {
		// A global signal listener to perform a move action
		this.$root.$on("globalMoveEvent", (x, y, z, absolute) => {
		this.moveRequest(x, y, z, absolute);
		});
		this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
		this.moveRequest(
		x_steps * this.stepXy,
		y_steps * this.stepXy,
		z_steps * this.stepZz,
		false
		);
		});
		// Update the current position in text boxes
		this.updatePosition();
		// Look for autofocus plugin
		@@ -226,72 +215,7 @@ export default {
		this.$root.$off("globalMoveEvent");
		},

		destroyed: function() {
		window.removeEventListener("keydown", this.keyDownMonitor);
		window.removeEventListener("keyup", this.keyUpMonitor);
		window.removeEventListener("wheel", this.wheelMonitor);
		},

		methods: {
		// Handle global mouse wheel events to be associated with navigation
		wheelMonitor: function(event) {
		// Only capture scroll if the event target's parent contains the "scrollTarget" class
		if (
		event.target.parentNode.classList.contains("scrollTarget") \|\|
		event.target.classList.contains("scrollTarget")
		) {
		var z_rel = (event.deltaY / 100) * this.stepZz;
		this.moveRequest(0, 0, z_rel, false);
		}
		},

		// Handle global key press events to be associated with navigation
		keyDownMonitor: function(event) {
		this.keysDown[event.keyCode] = true; //Add key to array

		// Convert keyCode dict into a list of key codes
		var keyCodeList = Object.keys(keyCodes).map(function(key) {
		return keyCodes[key];
		});

		if (
		!(event.target instanceof HTMLInputElement) &&
		!event.target.classList.contains("lightbox-link") &&
		keyCodeList.includes(event.keyCode)
		) {
		//console.log(this.keysDown)
		// Calculate movement array
		var x_rel = 0;
		var y_rel = 0;
		var z_rel = 0;
		if (keyCodes.left in this.keysDown) {
		x_rel = x_rel + this.stepXy;
		}
		if (keyCodes.right in this.keysDown) {
		x_rel = x_rel - this.stepXy;
		}
		if (keyCodes.up in this.keysDown) {
		y_rel = y_rel + this.stepXy;
		}
		if (keyCodes.down in this.keysDown) {
		y_rel = y_rel - this.stepXy;
		}
		if (keyCodes.pgup in this.keysDown) {
		z_rel = z_rel - this.stepZz;
		}
		if (keyCodes.pgdn in this.keysDown) {
		z_rel = z_rel + this.stepZz;
		}

		// Make a position request
		this.moveRequest(x_rel, y_rel, z_rel, false);
		}
		},

		keyUpMonitor: function(event) {
		delete this.keysDown[event.keyCode]; //Remove key from array
		},

		handleSubmit: function() {
		this.moveRequest(
		this.setPosition.x,

src/components/viewComponents/streamDisplay.vue

+8 −8

Original line number	Diff line number	Diff line
		@@ -108,6 +108,14 @@ export default {
		},

		methods: {
		flashStream: function() {
		// Run an animation that flashes the stream (for capture feedback)
		let element = this.$refs.streamDisplay;
		element.classList.remove("uk-animation-fade");
		element.offsetHeight; /* trigger reflow */
		element.classList.add("uk-animation-fade");
		},

		clickMonitor: function(event) {
		// Calculate steps from event coordinates and store config FOV
		let xCoordinate = event.offsetX;
		@@ -127,14 +135,6 @@ export default {
		this.$root.$emit("globalMoveEvent", xSteps, ySteps, 0, false);
		},

		flashStream: function() {
		// Run an animation that flashes the stream (for capture feedback)
		let element = this.$refs.streamDisplay;
		element.classList.remove("uk-animation-fade");
		element.offsetHeight; /* trigger reflow */
		element.classList.add("uk-animation-fade");
		},

		handleResize: function() {
		// Only fires resize event after no resize in 500ms (prevents resize event spam)
		clearTimeout(this.resizeTimeoutId);