Merge branch 'update-js-toolchain' into 'v3'
Update js toolchain See merge request openflexure/openflexure-microscope-server!431
This commit is contained in:
Julian Stirling
commit
c2b8706fb5
48 changed files with 6656 additions and 9629 deletions
|
|
@ -161,7 +161,6 @@ build:
|
|||
- .javascript_webapp
|
||||
- .rules_common
|
||||
script:
|
||||
- export NODE_OPTIONS=--openssl-legacy-provider
|
||||
# Build JS application for production
|
||||
- npm run build
|
||||
artifacts:
|
||||
|
|
|
|||
|
|
@ -5,14 +5,19 @@ module.exports = {
|
|||
node: true,
|
||||
},
|
||||
|
||||
parser: "vue-eslint-parser",
|
||||
|
||||
parserOptions: {
|
||||
parser: "babel-eslint",
|
||||
parser: "@babel/eslint-parser",
|
||||
requireConfigFile: false,
|
||||
ecmaVersion: 2020,
|
||||
sourceType: "module",
|
||||
},
|
||||
|
||||
extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
|
||||
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
},
|
||||
|
||||
extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,12 +18,9 @@
|
|||
|
||||
_Note: If you are using a Windows OS, the following commands must be executed in a Powershell terminal._
|
||||
|
||||
* Install Node.js (and npm)
|
||||
* Install dependencies with `npm install`
|
||||
* Node v18 changes SSL, and so you need a legacy version for compatibility:
|
||||
* On Windows: `$env:NODE_OPTIONS = "--openssl-legacy-provider"`
|
||||
* On Linux/MacOS `export NODE_OPTIONS=--openssl-legacy-provider`
|
||||
* Install Node.js v18 (and npm)
|
||||
* Navigate into the webapp directory with `cd webapp`
|
||||
* Install dependencies with `npm install`
|
||||
* Build the static web app with `npm run build`
|
||||
|
||||
# Developing
|
||||
|
|
|
|||
15755
webapp/package-lock.json
generated
15755
webapp/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -7,34 +7,37 @@
|
|||
"scripts": {
|
||||
"gv": "genversion src/version.js",
|
||||
"serve": "npm run gv && vue-cli-service serve --mode development",
|
||||
"build": "npm run gv && vue-cli-service build --openssl-legacy-provider --mode production",
|
||||
"build": "npm run gv && vue-cli-service build --mode production",
|
||||
"lint": "vue-cli-service lint --no-fix --max-warnings 0",
|
||||
"lint:fix": "vue-cli-service lint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"material-design-icons": "^3.0",
|
||||
"material-symbols": "^0.14.3",
|
||||
"mousetrap": "^1.6.5",
|
||||
"openseadragon": "^5.0.0",
|
||||
"vue-observe-visibility": "^0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.12",
|
||||
"@vue/cli-plugin-eslint": "^4.5",
|
||||
"@vue/cli-service": "^4.5",
|
||||
"@vue/eslint-config-prettier": "^6.0",
|
||||
"axios": "^0.21",
|
||||
"babel-eslint": "^10.1",
|
||||
"@babel/eslint-parser": "^7.28.5",
|
||||
"@vue/cli-plugin-babel": "^5.0.9",
|
||||
"@vue/cli-plugin-eslint": "^5.0.9",
|
||||
"@vue/cli-plugin-router": "^5.0.9",
|
||||
"@vue/cli-plugin-vuex": "^5.0.9",
|
||||
"@vue/cli-service": "^5.0.9",
|
||||
"@vue/eslint-config-prettier": "^7.1.0",
|
||||
"axios": "^1.13.1",
|
||||
"core-js": "^3.46.0",
|
||||
"css-loader": "^3.6",
|
||||
"eslint": "^6.8",
|
||||
"eslint-plugin-prettier": "^3.4",
|
||||
"eslint-plugin-vue": "^6.2",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.10.2",
|
||||
"eslint-plugin-prettier": "^3.4.1",
|
||||
"eslint-plugin-vue": "^7.20.0",
|
||||
"genversion": "^3.2.0",
|
||||
"less": "^3.13",
|
||||
"less-loader": "^5.0",
|
||||
"mdns-js": "^1.0",
|
||||
"prettier": "^1.19",
|
||||
"uikit": "^3.17",
|
||||
"less": "^4.4.2",
|
||||
"less-loader": "^11.1.4",
|
||||
"material-symbols": "^0.39.1",
|
||||
"prettier": "^2.8.8",
|
||||
"uikit": "^3.24.2",
|
||||
"vue": "^2.7",
|
||||
"vue-template-compiler": "^2.7",
|
||||
"vuejs-paginate": "^2.1",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ import loadingContent from "./components/loadingContent.vue";
|
|||
|
||||
var Mousetrap = require("mousetrap");
|
||||
|
||||
Mousetrap.prototype.stopCallback = function(e, element) {
|
||||
Mousetrap.prototype.stopCallback = function (e, element) {
|
||||
// if the element has the class "mousetrap" then no need to stop
|
||||
if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
|
||||
return false;
|
||||
|
|
@ -56,7 +56,7 @@ export default {
|
|||
loadingContent,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
appAvailable: false,
|
||||
arrowKeysDown: {},
|
||||
|
|
@ -67,14 +67,14 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
isSystemDark: function() {
|
||||
isSystemDark: function () {
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
handleTheme: function() {
|
||||
handleTheme: function () {
|
||||
var isDark = false;
|
||||
if (this.$store.state.appTheme == "dark") {
|
||||
isDark = true;
|
||||
|
|
@ -98,7 +98,7 @@ export default {
|
|||
this.systemDark = true;
|
||||
}
|
||||
// Create a theme observer to watch for changes
|
||||
this.themeObserver = mql.addListener(e => {
|
||||
this.themeObserver = mql.addListener((e) => {
|
||||
if (e.matches) {
|
||||
this.systemDark = true;
|
||||
} else {
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
this.checkConnection();
|
||||
},
|
||||
|
||||
created: function() {
|
||||
created: function () {
|
||||
window.addEventListener("beforeunload", this.handleExit);
|
||||
// Scrollwheel listener
|
||||
window.addEventListener("wheel", this.wheelMonitor);
|
||||
|
|
@ -131,7 +131,7 @@ export default {
|
|||
// Arrow keys
|
||||
Mousetrap.bind(
|
||||
["up", "down", "left", "right"],
|
||||
event => {
|
||||
(event) => {
|
||||
this.arrowKeysDown[event.keyCode] = true; //Add key to array
|
||||
this.navigateKeyHandler();
|
||||
},
|
||||
|
|
@ -139,7 +139,7 @@ export default {
|
|||
);
|
||||
Mousetrap.bind(
|
||||
["up", "down", "left", "right"],
|
||||
event => {
|
||||
(event) => {
|
||||
delete this.arrowKeysDown[event.keyCode]; //Remove key from array
|
||||
},
|
||||
"keyup",
|
||||
|
|
@ -192,7 +192,7 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
beforeDestroy: function() {
|
||||
beforeDestroy: function () {
|
||||
// Disconnect the theme observer
|
||||
if (this.themeObserver) {
|
||||
this.themeObserver.disconnect();
|
||||
|
|
@ -233,12 +233,12 @@ export default {
|
|||
this.$store.commit("changeWaiting", false);
|
||||
}
|
||||
},
|
||||
handleExit: function() {
|
||||
handleExit: function () {
|
||||
this.$root.$emit("globalTogglePreview", false);
|
||||
},
|
||||
|
||||
// Handle global mouse wheel events to be associated with navigation
|
||||
wheelMonitor: function(event) {
|
||||
wheelMonitor: function (event) {
|
||||
// Only capture scroll if the event target's parent contains the "scrollTarget" class
|
||||
if (
|
||||
event.target.parentNode.classList.contains("scrollTarget") ||
|
||||
|
|
@ -250,7 +250,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
navigateKeyHandler: function() {
|
||||
navigateKeyHandler: function () {
|
||||
// Calculate movement array
|
||||
var x_rel = 0;
|
||||
var y_rel = 0;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
>
|
||||
<img
|
||||
v-if="item.iconURL"
|
||||
style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
|
||||
style="filter: grayscale(100%); width: 22px; margin-top: 5px; margin-bottom: 8px"
|
||||
:src="item.iconURL"
|
||||
/>
|
||||
<span v-if="!item.iconURL" class="material-symbols-outlined">
|
||||
|
|
@ -112,7 +112,7 @@ export default {
|
|||
TabIcon,
|
||||
powerContent,
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
currentTab: "view",
|
||||
bottomTabs: [
|
||||
|
|
@ -142,7 +142,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
tabOrder: function() {
|
||||
tabOrder: function () {
|
||||
var ind = [];
|
||||
for (const tab of this.topTabs) {
|
||||
ind.push(tab.id);
|
||||
|
|
@ -153,7 +153,7 @@ export default {
|
|||
return ind;
|
||||
},
|
||||
|
||||
topTabs: function() {
|
||||
topTabs: function () {
|
||||
let tabs = [
|
||||
{
|
||||
id: "view",
|
||||
|
|
@ -182,21 +182,21 @@ export default {
|
|||
},
|
||||
];
|
||||
if (!this.$store.state.galleryEnabled) {
|
||||
tabs = tabs.filter(tab => tab.id != "gallery");
|
||||
tabs = tabs.filter((tab) => tab.id != "gallery");
|
||||
}
|
||||
return tabs;
|
||||
},
|
||||
allTabs() {
|
||||
return [...this.topTabs, ...this.bottomTabs];
|
||||
},
|
||||
currentTabIndex: function() {
|
||||
currentTabIndex: function () {
|
||||
return this.tabOrder.indexOf(this.currentTab);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// A global signal listener to switch tab
|
||||
this.$root.$on("globalSwitchTab", tabID => {
|
||||
this.$root.$on("globalSwitchTab", (tabID) => {
|
||||
this.currentTab = tabID;
|
||||
});
|
||||
// A global signal listener to increment tab
|
||||
|
|
@ -213,22 +213,22 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
setTab: function(event, tab) {
|
||||
setTab: function (event, tab) {
|
||||
if (!(this.currentTab == tab)) {
|
||||
this.currentTab = tab;
|
||||
}
|
||||
},
|
||||
incrementTabBy: function(n) {
|
||||
incrementTabBy: function (n) {
|
||||
const newIndex =
|
||||
(((this.currentTabIndex + n) % this.tabOrder.length) + this.tabOrder.length) %
|
||||
this.tabOrder.length;
|
||||
const newId = this.tabOrder[newIndex];
|
||||
this.currentTab = newId;
|
||||
},
|
||||
startModals: function() {
|
||||
startModals: function () {
|
||||
this.$refs.calibrationWizard.show_if_needed();
|
||||
},
|
||||
enterApp: function() {
|
||||
enterApp: function () {
|
||||
// Stuff to do once connected and all init modals are finished
|
||||
},
|
||||
scrollToTop() {
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
export default {
|
||||
name: "MiniStreamDisplay",
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
streamImgUri: function() {
|
||||
streamImgUri: function () {
|
||||
return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ export default {
|
|||
props: {},
|
||||
|
||||
computed: {
|
||||
tooltipOptions: function() {
|
||||
tooltipOptions: function () {
|
||||
var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
|
||||
return `pos: right; title: ${title}; delay: 500`;
|
||||
},
|
||||
|
||||
classObject: function() {
|
||||
classObject: function () {
|
||||
return {
|
||||
"tabicon-active": this.currentTab == this.id,
|
||||
"uk-disabled": this.requireConnection && !this.$store.getters.ready,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
computedTitle: function() {
|
||||
computedTitle: function () {
|
||||
if (this.title !== undefined) {
|
||||
return this.title;
|
||||
} else {
|
||||
|
|
@ -55,7 +55,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
tooltipOptions: function() {
|
||||
tooltipOptions: function () {
|
||||
if (this.showTooltip) {
|
||||
return `pos: right; title: ${this.computedTitle}; delay: 500`;
|
||||
} else {
|
||||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
classObject: function() {
|
||||
classObject: function () {
|
||||
return {
|
||||
"tabicon-active": this.currentTab == this.tabID,
|
||||
"uk-disabled": this.requireConnection && !this.$store.getters.ready,
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
taskUrl: null,
|
||||
progress: null,
|
||||
|
|
@ -245,13 +245,13 @@ export default {
|
|||
}
|
||||
// Check for a task that is ongoing.
|
||||
// We can't handle multiple tasks ongoing, so this picks the first.
|
||||
const ongoingTask = response.data.find(t => ["pending", "running"].includes(t.status));
|
||||
const ongoingTask = response.data.find((t) => ["pending", "running"].includes(t.status));
|
||||
if (ongoingTask) {
|
||||
// There is a started task
|
||||
this.taskStarted = true;
|
||||
this.$emit("taskStarted");
|
||||
// Find its URL
|
||||
const taskUrl = ongoingTask.links.find(t => t.rel == "self").href;
|
||||
const taskUrl = ongoingTask.links.find((t) => t.rel == "self").href;
|
||||
try {
|
||||
await this.pollOngoingTask(ongoingTask.id, taskUrl);
|
||||
} catch (error) {
|
||||
|
|
@ -262,7 +262,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
bootstrapTask: function() {
|
||||
bootstrapTask: function () {
|
||||
// Starts the process of creating a new Actiont ask
|
||||
if (this.requiresConfirmation) {
|
||||
this.modalConfirm(this.confirmationMessage).then(
|
||||
|
|
@ -309,14 +309,14 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
onTaskEnd: function() {
|
||||
onTaskEnd: function () {
|
||||
// Reset taskRunning and taskId
|
||||
this.taskRunning = false;
|
||||
this.taskStarted = false;
|
||||
this.$emit("finished");
|
||||
},
|
||||
|
||||
startPolling: function(taskId, taskUrl) {
|
||||
startPolling: function (taskId, taskUrl) {
|
||||
if (this.taskRunning != true) {
|
||||
// Starts polling an existing Action task
|
||||
this.taskUrl = taskUrl;
|
||||
|
|
@ -327,12 +327,12 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
pollTask: function(taskId, interval) {
|
||||
pollTask: function (taskId, interval) {
|
||||
interval = interval * 1000 || 500;
|
||||
|
||||
var checkCondition = (resolve, reject) => {
|
||||
// If the condition is met, we're done!
|
||||
axios.get(this.taskUrl, { baseURL: this.$store.getters.baseUri }).then(response => {
|
||||
axios.get(this.taskUrl, { baseURL: this.$store.getters.baseUri }).then((response) => {
|
||||
var result = response.data.status;
|
||||
this.taskStatus = result;
|
||||
if ((result == "running") | (result == "pending")) {
|
||||
|
|
@ -382,7 +382,7 @@ export default {
|
|||
this.$root.$emit("modalClosed");
|
||||
},
|
||||
|
||||
terminateTask: function() {
|
||||
terminateTask: function () {
|
||||
axios.delete(this.taskUrl, { baseURL: this.$store.getters.baseUri });
|
||||
this.$root.$emit("modalClosed");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -17,9 +17,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Paused banner outside scroll container, positioned relative to wrapper -->
|
||||
<div v-if="userIsHovering" class="paused-banner">
|
||||
Auto-scroll paused
|
||||
</div>
|
||||
<div v-if="userIsHovering" class="paused-banner">Auto-scroll paused</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -46,10 +44,10 @@ export default {
|
|||
},
|
||||
|
||||
watch: {
|
||||
log: function() {
|
||||
log: function () {
|
||||
this.scrollToBottom();
|
||||
},
|
||||
taskStatus: function() {
|
||||
taskStatus: function () {
|
||||
this.scrollToBottom();
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
barWidthFromProgress: function() {
|
||||
barWidthFromProgress: function () {
|
||||
var progress = this.progress <= 100 ? this.progress : 100;
|
||||
var styleString = `width: ${progress}%`;
|
||||
return styleString;
|
||||
},
|
||||
indeterminateProgressBar: function() {
|
||||
indeterminateProgressBar: function () {
|
||||
if (this.taskStatus == "pending") return true;
|
||||
if ((this.taskStatus == "running") & !this.progress) {
|
||||
return true;
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
internalLabels: function() {
|
||||
internalLabels: function () {
|
||||
if (this.dataType == "number_object") {
|
||||
let labels = {};
|
||||
for (const key in this.internalValue) {
|
||||
|
|
@ -138,7 +138,7 @@ export default {
|
|||
}
|
||||
return [];
|
||||
},
|
||||
valueLength: function() {
|
||||
valueLength: function () {
|
||||
if (this.dataType == "number_array") {
|
||||
if (this.internalValue == undefined) {
|
||||
return 0;
|
||||
|
|
@ -148,7 +148,7 @@ export default {
|
|||
return 1;
|
||||
}
|
||||
},
|
||||
dataType: function() {
|
||||
dataType: function () {
|
||||
let prop = this.dataSchema;
|
||||
if (prop == undefined) {
|
||||
return "undefined";
|
||||
|
|
@ -162,7 +162,7 @@ export default {
|
|||
return "number_array";
|
||||
}
|
||||
if (Array.isArray(prop.items)) {
|
||||
if (prop.items.every(t => num_types.includes(t.type))) {
|
||||
if (prop.items.every((t) => num_types.includes(t.type))) {
|
||||
return "number_array";
|
||||
}
|
||||
}
|
||||
|
|
@ -210,46 +210,46 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
resetInternalValue: function() {
|
||||
resetInternalValue: function () {
|
||||
// Whenever updatirng th internal value stringify and parse as a form of deepcopy.
|
||||
// This ensure that the this.value prop is not mutated for when elements of arrays
|
||||
// or objects are updated.
|
||||
this.internalValue = JSON.parse(JSON.stringify(this.value));
|
||||
},
|
||||
requestUpdate: async function() {
|
||||
requestUpdate: async function () {
|
||||
this.$emit("requestUpdate");
|
||||
},
|
||||
sendValue: async function() {
|
||||
sendValue: async function () {
|
||||
this.$emit("sendValue", this.internalValue);
|
||||
},
|
||||
checkboxUpdated: function() {
|
||||
checkboxUpdated: function () {
|
||||
if (this.internalValue != this.$refs.checkbox.checked) {
|
||||
this.internalValue = this.$refs.checkbox.checked;
|
||||
this.sendValue();
|
||||
}
|
||||
},
|
||||
focusIn: function(event) {
|
||||
focusIn: function (event) {
|
||||
this.valueOnEnter = event.target.value;
|
||||
},
|
||||
focusOut: function(event) {
|
||||
focusOut: function (event) {
|
||||
if (this.valueOnEnter != event.target.value) {
|
||||
this.sendValue(event.target.value);
|
||||
}
|
||||
},
|
||||
keyDown: function(event) {
|
||||
keyDown: function (event) {
|
||||
// Pressing enter should set the property, whether or not we think it's changed.
|
||||
if (event.keyCode == 13) {
|
||||
this.sendValue();
|
||||
}
|
||||
},
|
||||
updateIsEdited: function() {
|
||||
updateIsEdited: function () {
|
||||
this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
|
||||
},
|
||||
animationEnd: function() {
|
||||
animationEnd: function () {
|
||||
this.animateUpdate = false;
|
||||
this.$emit("animationShown");
|
||||
},
|
||||
deepStringify: function(val) {
|
||||
deepStringify: function (val) {
|
||||
// Create a json string where all internal numbers are also JSON strings. This is
|
||||
// needed to robustly check if the value is updated because the raw value may be a
|
||||
// number but anything typed in the input is a string. In the case of arrays or
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
propertyDescription: function() {
|
||||
propertyDescription: function () {
|
||||
try {
|
||||
return this.thingDescription(this.thingName).properties[this.propertyName];
|
||||
} catch (error) {
|
||||
|
|
@ -64,13 +64,13 @@ export default {
|
|||
},
|
||||
|
||||
watch: {
|
||||
propertyDescription: function() {
|
||||
propertyDescription: function () {
|
||||
// Ensure we read the property once the URL is known
|
||||
this.readProperty();
|
||||
},
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
mounted: function () {
|
||||
// Read the property when we're mounted - usually this won't
|
||||
// work because the URL isn't set yet. However, it's helpful if
|
||||
// the app is reloaded (e.g. from a dev server).
|
||||
|
|
@ -80,17 +80,17 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
readProperty: async function() {
|
||||
readProperty: async function () {
|
||||
let data = await this.readThingProperty(this.thingName, this.propertyName);
|
||||
this.value = data;
|
||||
return data;
|
||||
},
|
||||
writeProperty: async function(requestedValue) {
|
||||
writeProperty: async function (requestedValue) {
|
||||
try {
|
||||
this.value = requestedValue;
|
||||
await this.writeThingProperty(this.thingName, this.propertyName, requestedValue);
|
||||
if (this.readBack) {
|
||||
await new Promise(r => setTimeout(r, this.readBackDelay));
|
||||
await new Promise((r) => setTimeout(r, this.readBackDelay));
|
||||
let newVal = await this.readProperty();
|
||||
if (newVal == requestedValue) {
|
||||
this.animate = true;
|
||||
|
|
@ -112,7 +112,7 @@ export default {
|
|||
this.readProperty();
|
||||
}
|
||||
},
|
||||
resetAnimate: function() {
|
||||
resetAnimate: function () {
|
||||
this.animate = false;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
actionResponse: function() {
|
||||
actionResponse: function () {
|
||||
if (this.actionData.notify_on_success) {
|
||||
this.modalNotify(this.actionData.success_message);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
|
||||
components: { devTools },
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
|
||||
components: {},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
isNeeded: undefined,
|
||||
availableCalibrationTasks: {},
|
||||
|
|
@ -91,7 +91,7 @@ export default {
|
|||
return needsCalibration;
|
||||
},
|
||||
|
||||
resetData: function() {
|
||||
resetData: function () {
|
||||
this.movingBackward = false;
|
||||
this.taskIndex = 0;
|
||||
},
|
||||
|
|
@ -99,7 +99,7 @@ export default {
|
|||
/**
|
||||
* Create the calibration wizard task list dynamically.
|
||||
*/
|
||||
create_task_list: function(thingsToCal, includeWelcome = true) {
|
||||
create_task_list: function (thingsToCal, includeWelcome = true) {
|
||||
const tasks = [];
|
||||
|
||||
// Optionally include the welcome screen
|
||||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
this.tasks = tasks;
|
||||
},
|
||||
|
||||
show_if_needed: async function() {
|
||||
show_if_needed: async function () {
|
||||
// Check if the calibration modal is needed, and only show it if it is.
|
||||
let thingsToCal = await this.check_things_needing_calibration();
|
||||
const needed = thingsToCal.length > 0;
|
||||
|
|
@ -142,7 +142,7 @@ export default {
|
|||
},
|
||||
|
||||
// Forces modal to show on button press
|
||||
force_show: function() {
|
||||
force_show: function () {
|
||||
const allThings = Object.keys(this.availableCalibrationTasks);
|
||||
|
||||
this.resetData();
|
||||
|
|
@ -150,26 +150,26 @@ export default {
|
|||
this.show();
|
||||
},
|
||||
|
||||
show: function() {
|
||||
show: function () {
|
||||
// Show the modal element
|
||||
var el = this.$refs["calibrationModalEl"];
|
||||
this.showModalElement(el); // Calls the mixin
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
hide: function () {
|
||||
// Show the modal
|
||||
var el = this.$refs["calibrationModalEl"];
|
||||
this.hideModalElement(el); // Calls the mixin
|
||||
},
|
||||
|
||||
onHide: function() {
|
||||
onHide: function () {
|
||||
this.$emit("onClose");
|
||||
},
|
||||
|
||||
/*
|
||||
* Move to the previous task.
|
||||
*/
|
||||
previousTask: function() {
|
||||
previousTask: function () {
|
||||
this.movingBackward = true;
|
||||
if (this.taskIndex > 0) {
|
||||
this.taskIndex = this.taskIndex - 1;
|
||||
|
|
@ -179,7 +179,7 @@ export default {
|
|||
/*
|
||||
* Move to the next task or close the modal if this is the final task.
|
||||
*/
|
||||
nextTask: function() {
|
||||
nextTask: function () {
|
||||
this.movingBackward = false;
|
||||
if (this.taskIndex < this.tasks.length - 1) {
|
||||
this.taskIndex = this.taskIndex + 1;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default {
|
|||
/*
|
||||
* Move to the previous step in this task, or the previous task if first step.
|
||||
*/
|
||||
previousStep: function() {
|
||||
previousStep: function () {
|
||||
if (this.stepIndex > 0) {
|
||||
this.stepIndex = this.stepIndex - 1;
|
||||
} else {
|
||||
|
|
@ -98,7 +98,7 @@ export default {
|
|||
/*
|
||||
* Move to the next step in this task, or the next task if final step.
|
||||
*/
|
||||
nextStep: function() {
|
||||
nextStep: function () {
|
||||
if (this.stepIndex < this.steps.length - 1) {
|
||||
this.stepIndex = this.stepIndex + 1;
|
||||
return true;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<b>
|
||||
Before starting camera calibration:
|
||||
</b>
|
||||
<b> Before starting camera calibration: </b>
|
||||
</p>
|
||||
<ul class="uk-list uk-list-bullet">
|
||||
<li>Remove any samples from your microscope</li>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
cameraUri: function() {
|
||||
cameraUri: function () {
|
||||
return `${this.$store.getters.baseUri}/camera/`;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
steps: [{ component: camCalibrationExplanation }, { component: cameraMainCalibrationStep }],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
steps: [{ component: csmExplanation }, { component: focusStep }, { component: runCsmStep }],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>Camera-stage mapping will calibrate the stage movement using the camera.</p>
|
||||
<p>
|
||||
Camera-stage mapping will calibrate the stage movement using the camera.
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Before starting camera-stage mapping:
|
||||
</b>
|
||||
<b> Before starting camera-stage mapping: </b>
|
||||
</p>
|
||||
<ul class="uk-list uk-list-bullet">
|
||||
<li>Add a sample with dense features to the microscope.</li>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<stepTemplateWithStream>
|
||||
<p>
|
||||
Use the buttons below to bring the sample into focus.
|
||||
</p>
|
||||
<p>Use the buttons below to bring the sample into focus.</p>
|
||||
<p>You may also adjust the z position with <b>page up</b> and <b>page down</b>.</p>
|
||||
<template #below-stream>
|
||||
<div class="action-button-container">
|
||||
|
|
|
|||
|
|
@ -3,12 +3,8 @@
|
|||
<p>
|
||||
<b>Calibration complete</b>
|
||||
</p>
|
||||
<p>
|
||||
You'll need to repeat these steps from the Settings tab if you swap your objective.
|
||||
</p>
|
||||
<p>
|
||||
Click Finish to return to your microscope.
|
||||
</p>
|
||||
<p>You'll need to repeat these steps from the Settings tab if you swap your objective.</p>
|
||||
<p>Click Finish to return to your microscope.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
steps: [{ component: this.stepComponent, props: this.stepProps }],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<b>
|
||||
Some important microscope calibration data is currently missing.
|
||||
</b>
|
||||
<b> Some important microscope calibration data is currently missing. </b>
|
||||
</p>
|
||||
<p>
|
||||
Your microscope will still function, however some functionality will be limited, and image
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@
|
|||
<input v-model="reloadWhenOverridingOrigin" class="uk-input uk-checkbox" type="checkbox" />
|
||||
Reload web app with new origin
|
||||
</label>
|
||||
<button class="uk-button uk-button-default uk-margin-small">
|
||||
Apply
|
||||
</button>
|
||||
<button class="uk-button uk-button-default uk-margin-small">Apply</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,7 +19,7 @@ export default {
|
|||
|
||||
components: {},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
newOrigin: this.$store.state.overrideOrigin,
|
||||
reloadWhenOverridingOrigin: true,
|
||||
|
|
@ -29,7 +27,7 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
overrideAPIHost: function(event) {
|
||||
overrideAPIHost: function (event) {
|
||||
// Save the origin override, so that if we reload the web app, you can easily
|
||||
this.$store.commit("changeOverrideOrigin", this.newOrigin);
|
||||
|
||||
|
|
|
|||
|
|
@ -50,9 +50,7 @@
|
|||
|
||||
<hr />
|
||||
</div>
|
||||
<div v-else-if="$store.state.waiting">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else-if="$store.state.waiting">Loading...</div>
|
||||
<div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
|
||||
<div v-else>No active connection</div>
|
||||
</div>
|
||||
|
|
@ -65,7 +63,7 @@ export default {
|
|||
name: "StatusPane",
|
||||
components: { ActionButton },
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
version: undefined,
|
||||
version_source: undefined,
|
||||
|
|
@ -73,7 +71,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
things: function() {
|
||||
things: function () {
|
||||
return this.$store.getters["wot/thingDescriptions"];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -89,18 +89,18 @@ export default {
|
|||
let label = r.output[0] ? "sample" : "background";
|
||||
this.modalNotify(`Current image is ${label} (${r.output[1]})`);
|
||||
},
|
||||
readSettings: async function() {
|
||||
readSettings: async function () {
|
||||
this.backgroundDetectorStatus = await this.readThingProperty(
|
||||
"camera",
|
||||
"background_detector_status",
|
||||
);
|
||||
},
|
||||
writeSettings: async function(requestedValue) {
|
||||
writeSettings: async function (requestedValue) {
|
||||
await this.invokeAction("camera", "update_detector_settings", { data: requestedValue });
|
||||
this.animate = true;
|
||||
this.readSettings();
|
||||
},
|
||||
resetAnimate: function() {
|
||||
resetAnimate: function () {
|
||||
this.animate = false;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -139,9 +139,7 @@
|
|||
</div>
|
||||
<div v-else class="uk-text-warning">
|
||||
<p>Stage positioning is disabled since no stage is connected.</p>
|
||||
<p>
|
||||
Please check all data and power connections to your motor controller board.
|
||||
</p>
|
||||
<p>Please check all data and power connections to your motor controller board.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -160,7 +158,7 @@ export default {
|
|||
syncPropertyButton,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
setPosition: null,
|
||||
isAutofocusing: 0,
|
||||
|
|
@ -178,13 +176,13 @@ export default {
|
|||
invert() {
|
||||
return this.$store.state.navigationInvert;
|
||||
},
|
||||
baseUri: function() {
|
||||
baseUri: function () {
|
||||
return this.$store.getters.baseUri;
|
||||
},
|
||||
positionStatusUri: function() {
|
||||
positionStatusUri: function () {
|
||||
return `${this.baseUri}/stage/position`;
|
||||
},
|
||||
moveInImageCoordinatesUri: function() {
|
||||
moveInImageCoordinatesUri: function () {
|
||||
return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
|
||||
},
|
||||
},
|
||||
|
|
@ -235,7 +233,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
timeout(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
},
|
||||
async move(x, y, z, absolute) {
|
||||
// Move the stage, by updating the controls and starting a move task
|
||||
|
|
@ -260,7 +258,7 @@ export default {
|
|||
async startMoveTask() {
|
||||
await this.$refs.moveButton.startTask();
|
||||
},
|
||||
moveInImageCoordinatesRequest: function(x, y) {
|
||||
moveInImageCoordinatesRequest: function (x, y) {
|
||||
// If not movement-locked
|
||||
if (!this.moveLock) {
|
||||
// Lock move requests
|
||||
|
|
@ -281,7 +279,7 @@ export default {
|
|||
.then(() => {
|
||||
this.updatePosition(); // Update the position in text boxes
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
this.modalError(error); // Let mixin handle error
|
||||
})
|
||||
.then(() => {
|
||||
|
|
@ -294,7 +292,7 @@ export default {
|
|||
this.setPosition = await this.readThingProperty("stage", "position");
|
||||
},
|
||||
|
||||
handleCaptureResponse: async function(response) {
|
||||
handleCaptureResponse: async function (response) {
|
||||
// Retrieve the captured image and save it
|
||||
let imageUri = response.output.href;
|
||||
if (!imageUri) {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
EndpointButton,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
maxitems: 20,
|
||||
page: 1,
|
||||
|
|
@ -103,11 +103,11 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
filteredLevels: function() {
|
||||
filteredLevels: function () {
|
||||
let cutoffIndex = this.allLevels.indexOf(this.filterLevel);
|
||||
return this.allLevels.slice(cutoffIndex, -1);
|
||||
},
|
||||
filteredItems: function() {
|
||||
filteredItems: function () {
|
||||
var items = [];
|
||||
for (var item of this.logs) {
|
||||
// Add to capture list if matched
|
||||
|
|
@ -118,17 +118,17 @@ export default {
|
|||
|
||||
return items;
|
||||
},
|
||||
logURI: function() {
|
||||
logURI: function () {
|
||||
return `${this.$store.getters.baseUri}/log/`;
|
||||
},
|
||||
logFileURI: function() {
|
||||
logFileURI: function () {
|
||||
return `${this.$store.getters.baseUri}/logfile/`;
|
||||
},
|
||||
pagedItems: function() {
|
||||
pagedItems: function () {
|
||||
let startIndex = (this.page - 1) * this.maxitems;
|
||||
return this.filteredItems.slice(startIndex, startIndex + this.maxitems);
|
||||
},
|
||||
numberOfPages: function() {
|
||||
numberOfPages: function () {
|
||||
return Math.floor(this.filteredItems.length / this.maxitems);
|
||||
},
|
||||
},
|
||||
|
|
@ -190,12 +190,12 @@ export default {
|
|||
}
|
||||
this.logs = logs.reverse(); // Display in reverse chronological order
|
||||
},
|
||||
formatDateTime: function(isoDateTimeString) {
|
||||
formatDateTime: function (isoDateTimeString) {
|
||||
isoDateTimeString = isoDateTimeString.replace(",", ".");
|
||||
let date = new Date(isoDateTimeString);
|
||||
return date.toLocaleDateString() + " " + date.toLocaleTimeString();
|
||||
},
|
||||
escapeText: function(unsafeText) {
|
||||
escapeText: function (unsafeText) {
|
||||
let div = document.createElement("div");
|
||||
div.innerText = unsafeText;
|
||||
return div.innerHTML;
|
||||
|
|
|
|||
|
|
@ -35,14 +35,14 @@ export default {
|
|||
|
||||
components: {},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
isRaspberrypi: undefined,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
things: function() {
|
||||
things: function () {
|
||||
return this.$store.getters["wot/thingDescriptions"];
|
||||
},
|
||||
},
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
systemRequest: function(action) {
|
||||
systemRequest: function (action) {
|
||||
let message = "";
|
||||
if (action == "reboot") {
|
||||
message = "Restart microscope?";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div v-observe-visibility="visibilityChanged">
|
||||
<div id="openseadragon"></div>
|
||||
<div id="openseadragon" ref="osdContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
osdViewer: null,
|
||||
};
|
||||
|
|
@ -76,8 +76,9 @@ export default {
|
|||
if (this.osdViewer) {
|
||||
this.osdViewer.destroy();
|
||||
}
|
||||
await this.$nextTick();
|
||||
this.osdViewer = OpenSeaDragon({
|
||||
id: "openseadragon",
|
||||
element: this.$refs.osdContainer,
|
||||
crossOriginPolicy: "Anonymous",
|
||||
tileSources: this.src,
|
||||
showNavigationControl: false,
|
||||
|
|
|
|||
|
|
@ -35,9 +35,7 @@
|
|||
button-label="Download JPEG"
|
||||
/>
|
||||
</div>
|
||||
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">
|
||||
Delete
|
||||
</button>
|
||||
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
|
||||
<action-button
|
||||
v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)"
|
||||
submit-label="Stitch Images"
|
||||
|
|
@ -121,14 +119,8 @@ export default {
|
|||
let yyyy = d.getFullYear();
|
||||
let mm = d.getMonth() + 1;
|
||||
let dd = d.getDate();
|
||||
let HH = d
|
||||
.getHours()
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
let MM = d
|
||||
.getMinutes()
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
let HH = d.getHours().toString().padStart(2, "0");
|
||||
let MM = d.getMinutes().toString().padStart(2, "0");
|
||||
return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
|
||||
},
|
||||
formatDuration(duration) {
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@
|
|||
:button-primary="false"
|
||||
:modal-progress="true"
|
||||
:requires-confirmation="true"
|
||||
:confirmation-message="
|
||||
'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
|
||||
"
|
||||
:confirmation-message="'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'"
|
||||
@error="modalError"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -62,9 +60,7 @@
|
|||
<div class="gallery-grid uk-grid-match" uk-grid>
|
||||
<div v-if="scansEmpty">
|
||||
<h2>No scans available</h2>
|
||||
<p>
|
||||
There are no scans available to show.
|
||||
</p>
|
||||
<p>There are no scans available to show.</p>
|
||||
</div>
|
||||
<div v-for="scanData in paginatedScans" :key="scanData.id">
|
||||
<scan-card
|
||||
|
|
@ -110,7 +106,7 @@ export default {
|
|||
name: "ScanListContent",
|
||||
components: { actionButton, scanCard, ScanViewerModal },
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
scans: [],
|
||||
ongoing: null,
|
||||
|
|
@ -162,13 +158,13 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
created: function() {
|
||||
created: function () {
|
||||
// Watch for host 'ready', then update status
|
||||
this.unwatchStoreFunction = this.$store.watch(
|
||||
(state, getters) => {
|
||||
return getters.ready;
|
||||
},
|
||||
ready => {
|
||||
(ready) => {
|
||||
if (ready) {
|
||||
// If the connection is now ready, update capture list
|
||||
this.updateScans();
|
||||
|
|
@ -205,7 +201,7 @@ export default {
|
|||
if (!scans | (scans.length == 0)) {
|
||||
this.scans = scans;
|
||||
}
|
||||
scans.forEach(scan => {
|
||||
scans.forEach((scan) => {
|
||||
scan.can_stitch = !scan.stitch_available && scan.number_of_images > 3;
|
||||
});
|
||||
scans.sort((a, b) => {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
:button-primary="true"
|
||||
:can-terminate="true"
|
||||
:requires-confirmation="true"
|
||||
:confirmation-message="
|
||||
'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'
|
||||
"
|
||||
:confirmation-message="'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'"
|
||||
thing="camera_stage_mapping"
|
||||
action="calibrate_xy"
|
||||
:submit-label="'Auto-Calibrate Using Camera'"
|
||||
|
|
@ -26,9 +24,9 @@
|
|||
>
|
||||
Download Calibration Data
|
||||
</button>
|
||||
<div v-if="csmMatrix != 'undefined'" style="margin:10px;">
|
||||
<details
|
||||
><summary>Calibration Details</summary>
|
||||
<div v-if="csmMatrix != 'undefined'" style="margin: 10px">
|
||||
<details>
|
||||
<summary>Calibration Details</summary>
|
||||
<strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -84,7 +82,7 @@ export default {
|
|||
this.updateDisplayedCSM();
|
||||
}
|
||||
},
|
||||
getCalibrationData: async function() {
|
||||
getCalibrationData: async function () {
|
||||
try {
|
||||
let data = await this.readThingProperty("camera_stage_mapping", "last_calibration");
|
||||
if (data == {}) {
|
||||
|
|
@ -101,7 +99,7 @@ export default {
|
|||
this.modalError(error); // Let mixin handle error
|
||||
}
|
||||
},
|
||||
updateDisplayedCSM: async function() {
|
||||
updateDisplayedCSM: async function () {
|
||||
let csmMatrix = await this.readThingProperty(
|
||||
"camera_stage_mapping",
|
||||
"image_to_stage_displacement_matrix",
|
||||
|
|
@ -121,7 +119,7 @@ export default {
|
|||
Number(((streamResolution[1] ** 2 * this.csmRatio) / this.csmResolution[0]).toFixed(0)),
|
||||
];
|
||||
},
|
||||
onRecalibrateResponse: function() {
|
||||
onRecalibrateResponse: function () {
|
||||
this.modalNotify("Finished stage-to-camera calibration.");
|
||||
this.updateDisplayedCSM();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
export default {
|
||||
name: "AppSettings",
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
cameraUri: function() {
|
||||
cameraUri: function () {
|
||||
return `${this.$store.getters.baseUri}/camera/`;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,16 +4,12 @@
|
|||
<div>
|
||||
<div class="uk-margin">
|
||||
<p>Your z motor is currently {{ z_inverted }} inverted.</p>
|
||||
<p>
|
||||
We expect that moving in +z:
|
||||
</p>
|
||||
<p>We expect that moving in +z:</p>
|
||||
<ul>
|
||||
<li>Moves your objective up, towards the sample and illumination</li>
|
||||
<li>Turns the exposed z gear anti-clockwise (when viewed from above)</li>
|
||||
</ul>
|
||||
<p>
|
||||
If this is not the case, click the button below to switch.
|
||||
</p>
|
||||
<p>If this is not the case, click the button below to switch.</p>
|
||||
<div class="uk-margin">
|
||||
<div class="uk-margin">
|
||||
<action-button
|
||||
|
|
@ -41,14 +37,14 @@ export default {
|
|||
ActionButton,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
z_inverted: "",
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
stageType: function() {
|
||||
stageType: function () {
|
||||
return this.thingDescription("stage").title;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web
|
||||
Stream</label
|
||||
>
|
||||
<p class="uk-margin-small">
|
||||
This will disable the embedded web stream of the camera.
|
||||
</p>
|
||||
<p class="uk-margin-small">This will disable the embedded web stream of the camera.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
export default {
|
||||
name: "StreamSettings",
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ export default {
|
|||
calibrationWizard,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
selected: "display",
|
||||
currentTab: "display",
|
||||
|
|
@ -131,12 +131,12 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
setTab: function(event, tab) {
|
||||
setTab: function (event, tab) {
|
||||
if (!(this.currentTab == tab)) {
|
||||
this.currentTab = tab;
|
||||
}
|
||||
},
|
||||
startModals: function() {
|
||||
startModals: function () {
|
||||
this.$refs.calibrationWizard.force_show();
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div v-if="!backendOK" class="uk-alert-danger">
|
||||
No scan back-end found.
|
||||
</div>
|
||||
<div v-if="!backendOK" class="uk-alert-danger">No scan back-end found.</div>
|
||||
<!-- Grid managing tab content -->
|
||||
<div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
|
||||
<div class="control-component uk-padding-small">
|
||||
|
|
@ -101,9 +99,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-show="scanning">
|
||||
<h2 v-if="displayImageOnRight" style="text-align: center;">
|
||||
Live stitching preview
|
||||
</h2>
|
||||
<h2 v-if="displayImageOnRight" style="text-align: center">Live stitching preview</h2>
|
||||
<mini-stream-display v-if="displayImageOnRight" />
|
||||
<action-log-display id="log-display" :log="log" :task-status="taskStatus" />
|
||||
<action-progress-bar :progress="progress" :task-status="taskStatus" />
|
||||
|
|
@ -199,7 +195,7 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
onScanError: function(error) {
|
||||
onScanError: function (error) {
|
||||
this.scanRunning = false;
|
||||
this.modalError(error);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
export default {
|
||||
name: "StreamDisplay",
|
||||
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false,
|
||||
displaySize: [0, 0],
|
||||
|
|
@ -49,14 +49,14 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
streamEnabled: function() {
|
||||
streamEnabled: function () {
|
||||
return this.$store.getters.ready && !this.$store.state.disableStream;
|
||||
},
|
||||
thisStreamOpen: function() {
|
||||
thisStreamOpen: function () {
|
||||
// Only a single MJPEG connection should be open at a time
|
||||
return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
|
||||
},
|
||||
streamImgUri: function() {
|
||||
streamImgUri: function () {
|
||||
return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
|
||||
},
|
||||
},
|
||||
|
|
@ -77,11 +77,11 @@ export default {
|
|||
this.sizeObserver.observe(streamDisplayElement);
|
||||
},
|
||||
|
||||
created: function() {
|
||||
created: function () {
|
||||
// Do nothing: preview stream now runs all the time
|
||||
},
|
||||
|
||||
beforeDestroy: function() {
|
||||
beforeDestroy: function () {
|
||||
// Remove global signal listener to change the GPU preview state
|
||||
this.$root.$off("globalTogglePreview");
|
||||
// Remove global signal listener to flash the stream element
|
||||
|
|
@ -96,18 +96,18 @@ export default {
|
|||
visibilityChanged(isVisible) {
|
||||
this.isVisible = isVisible;
|
||||
},
|
||||
flashStream: function() {
|
||||
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");
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
element.classList.remove("uk-animation-fade");
|
||||
}, 800);
|
||||
},
|
||||
|
||||
clickMonitor: function(event) {
|
||||
clickMonitor: function (event) {
|
||||
// Calculate steps from event coordinates
|
||||
let xCoordinate = event.offsetX;
|
||||
let yCoordinate = event.offsetY;
|
||||
|
|
@ -129,13 +129,13 @@ export default {
|
|||
this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
|
||||
},
|
||||
|
||||
handleResize: function() {
|
||||
handleResize: function () {
|
||||
// Only fires resize event after no resize in 500ms (prevents resize event spam)
|
||||
clearTimeout(this.resizeTimeoutId);
|
||||
this.resizeTimeoutId = setTimeout(this.handleDoneResize, 250);
|
||||
},
|
||||
|
||||
handleDoneResize: function() {
|
||||
handleDoneResize: function () {
|
||||
// Recalculate size
|
||||
|
||||
this.recalculateSize();
|
||||
|
|
@ -151,7 +151,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
recalculateSize: function() {
|
||||
recalculateSize: function () {
|
||||
// Calculate stream size
|
||||
let element = this.$refs.streamDisplay.parentNode;
|
||||
let bound = element.getBoundingClientRect();
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ Vue.mixin({
|
|||
);
|
||||
return url;
|
||||
},
|
||||
modalConfirm: function(modalText) {
|
||||
modalConfirm: function (modalText) {
|
||||
var context = this;
|
||||
|
||||
// Stop GPU preview to show modal
|
||||
|
|
@ -89,18 +89,18 @@ Vue.mixin({
|
|||
// force OK to be capitalised
|
||||
UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
|
||||
|
||||
var showModal = function(resolve, reject) {
|
||||
var showModal = function (resolve, reject) {
|
||||
UIkit.modal
|
||||
.confirm(modalText, { stack: true })
|
||||
.then(
|
||||
function() {
|
||||
function () {
|
||||
resolve();
|
||||
},
|
||||
function() {
|
||||
function () {
|
||||
reject();
|
||||
},
|
||||
)
|
||||
.finally(function() {
|
||||
.finally(function () {
|
||||
// Re-enable the GPU preview, if it was active before the modal
|
||||
if (context.$store.state.autoGpuPreview) {
|
||||
context.$root.$emit("globalTogglePreview", true);
|
||||
|
|
@ -111,14 +111,14 @@ Vue.mixin({
|
|||
return new Promise(showModal);
|
||||
},
|
||||
|
||||
modalNotify: function(message, status = "success") {
|
||||
modalNotify: function (message, status = "success") {
|
||||
UIkit.notification({
|
||||
message: message,
|
||||
status: status,
|
||||
});
|
||||
},
|
||||
|
||||
modalDialog: function(title, message) {
|
||||
modalDialog: function (title, message) {
|
||||
UIkit.modal.dialog(
|
||||
`
|
||||
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||
|
|
@ -133,7 +133,7 @@ Vue.mixin({
|
|||
);
|
||||
},
|
||||
|
||||
modalError: function(error) {
|
||||
modalError: function (error) {
|
||||
var errormsg = this.getErrorMessage(error);
|
||||
this.$store.commit("setErrorMessage", errormsg);
|
||||
UIkit.notification({
|
||||
|
|
@ -142,7 +142,7 @@ Vue.mixin({
|
|||
});
|
||||
},
|
||||
|
||||
getErrorMessage: function(error) {
|
||||
getErrorMessage: function (error) {
|
||||
// Format the error.
|
||||
let data = this.getErrorData(error);
|
||||
// Get error data may get an object. Handle edge cases and if not try to use
|
||||
|
|
@ -156,7 +156,7 @@ Vue.mixin({
|
|||
return String(data);
|
||||
}
|
||||
},
|
||||
getErrorData: function(error) {
|
||||
getErrorData: function (error) {
|
||||
// If a response was obtained, extract the most specific message
|
||||
if (error.response) {
|
||||
// If the response is a nicely formatted JSON response from the server
|
||||
|
|
@ -182,15 +182,15 @@ Vue.mixin({
|
|||
return error;
|
||||
},
|
||||
|
||||
showModalElement: function(element) {
|
||||
showModalElement: function (element) {
|
||||
UIkit.modal(element).show();
|
||||
},
|
||||
|
||||
hideModalElement: function(element) {
|
||||
hideModalElement: function (element) {
|
||||
UIkit.modal(element).hide();
|
||||
},
|
||||
|
||||
toggleModalElement: function(element) {
|
||||
toggleModalElement: function (element) {
|
||||
UIkit.modal(element).toggle();
|
||||
},
|
||||
},
|
||||
|
|
@ -198,5 +198,5 @@ Vue.mixin({
|
|||
|
||||
new Vue({
|
||||
store,
|
||||
render: h => h(App),
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
|
|||
|
|
@ -146,14 +146,14 @@ export default new Vuex.Store({
|
|||
actions: {},
|
||||
|
||||
getters: {
|
||||
baseUri: state => state.origin,
|
||||
ready: state => state.available,
|
||||
baseUri: (state) => state.origin,
|
||||
ready: (state) => state.available,
|
||||
},
|
||||
|
||||
plugins: [
|
||||
store => {
|
||||
(store) => {
|
||||
// Load initial state from localStorage
|
||||
LOCALSTORAGE_KEYS.forEach(key => {
|
||||
LOCALSTORAGE_KEYS.forEach((key) => {
|
||||
console.log(key);
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved !== null) {
|
||||
|
|
|
|||
|
|
@ -28,12 +28,7 @@ export const wotStoreModule = {
|
|||
// Deduplication should be done elsewhere.
|
||||
let response = await axios.get(uri);
|
||||
let td = response.data;
|
||||
let thing_name =
|
||||
name |
|
||||
uri
|
||||
.replace(/\/$/, "")
|
||||
.split("/")
|
||||
.pop();
|
||||
let thing_name = name | uri.replace(/\/$/, "").split("/").pop();
|
||||
commit("addThingDescription", {
|
||||
thingName: thing_name,
|
||||
thingDescription: td,
|
||||
|
|
@ -53,38 +48,40 @@ export const wotStoreModule = {
|
|||
},
|
||||
},
|
||||
getters: {
|
||||
thingDescriptions: state => {
|
||||
thingDescriptions: (state) => {
|
||||
return state.thingDescriptions;
|
||||
},
|
||||
thingDescription: state => thingName => {
|
||||
thingDescription: (state) => (thingName) => {
|
||||
return state.thingDescriptions[thingName];
|
||||
},
|
||||
thingAvailable: state => thingName => {
|
||||
thingAvailable: (state) => (thingName) => {
|
||||
return thingName in state.thingDescriptions;
|
||||
},
|
||||
thingFormUrl: state => (thing, affordanceType, affordance, op, allowUndefined = true) => {
|
||||
// Find the URL for a particular operation
|
||||
let td = state.thingDescriptions[thing];
|
||||
if (!td) {
|
||||
if (allowUndefined) return undefined;
|
||||
throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
|
||||
}
|
||||
let affordances = td[affordanceType];
|
||||
let href = findFormHref(affordances[affordance], op);
|
||||
if (href == undefined) {
|
||||
if (allowUndefined) return undefined;
|
||||
throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
|
||||
}
|
||||
// If we've found an href, prepend the `base` URL if appropriate
|
||||
if (href.startsWith("http")) return href;
|
||||
if ("base" in td) {
|
||||
let base = td.base;
|
||||
if (href.startsWith("/")) href = href.slice(1);
|
||||
if (!base.endsWith("/")) base += "/";
|
||||
return base + href;
|
||||
}
|
||||
return href;
|
||||
},
|
||||
thingFormUrl:
|
||||
(state) =>
|
||||
(thing, affordanceType, affordance, op, allowUndefined = true) => {
|
||||
// Find the URL for a particular operation
|
||||
let td = state.thingDescriptions[thing];
|
||||
if (!td) {
|
||||
if (allowUndefined) return undefined;
|
||||
throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
|
||||
}
|
||||
let affordances = td[affordanceType];
|
||||
let href = findFormHref(affordances[affordance], op);
|
||||
if (href == undefined) {
|
||||
if (allowUndefined) return undefined;
|
||||
throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
|
||||
}
|
||||
// If we've found an href, prepend the `base` URL if appropriate
|
||||
if (href.startsWith("http")) return href;
|
||||
if ("base" in td) {
|
||||
let base = td.base;
|
||||
if (href.startsWith("/")) href = href.slice(1);
|
||||
if (!base.endsWith("/")) base += "/";
|
||||
return base + href;
|
||||
}
|
||||
return href;
|
||||
},
|
||||
thingPropertyUrl: (_state, getters) => (thing, property, op, allowUndefined) => {
|
||||
// Find the URL for a particular property
|
||||
return getters.thingFormUrl(thing, "properties", property, op, allowUndefined);
|
||||
|
|
@ -100,7 +97,7 @@ export function findFormHref(affordance, op) {
|
|||
// Find the form in the affordance that matches the given operation type
|
||||
if (affordance == undefined) return undefined;
|
||||
let forms = affordance.forms;
|
||||
let matchingForm = forms.find(f => f.op == op || f.op.includes(op));
|
||||
let matchingForm = forms.find((f) => f.op == op || f.op.includes(op));
|
||||
if (matchingForm == undefined) return undefined;
|
||||
return matchingForm.href;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue