rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Let prettier change a load of things because new prettier has new rules :(

Browse source
This commit is contained in:
Julian Stirling 2025-11-02 18:15:02 +00:00
parent a05156407b
commit 1601bdd123
44 changed files with 218 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

9
webapp/.eslintrc.js
View file

@ -5,14 +5,19 @@ module.exports = {
node: true, node: true,
}, },
parser: "vue-eslint-parser",
parserOptions: { parserOptions: {
parser: "@babel/eslint-parser", parser: "@babel/eslint-parser",
requireConfigFile: false,
ecmaVersion: 2020,
sourceType: "module",
}, },
extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
rules: { rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
}, },
extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
}; };

24
webapp/src/App.vue
View file

@ -27,7 +27,7 @@ import loadingContent from "./components/loadingContent.vue";
var Mousetrap = require("mousetrap"); 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 the element has the class "mousetrap" then no need to stop
if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) { if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
return false; return false;
@ -56,7 +56,7 @@ export default {
loadingContent, loadingContent,
}, },
data: function() { data: function () {
return { return {
appAvailable: false, appAvailable: false,
arrowKeysDown: {}, arrowKeysDown: {},
@ -67,14 +67,14 @@ export default {
}, },
computed: { computed: {
isSystemDark: function() { isSystemDark: function () {
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
return true; return true;
} else { } else {
return false; return false;
} }
}, },
handleTheme: function() { handleTheme: function () {
var isDark = false; var isDark = false;
if (this.$store.state.appTheme == "dark") { if (this.$store.state.appTheme == "dark") {
isDark = true; isDark = true;
@ -98,7 +98,7 @@ export default {
this.systemDark = true; this.systemDark = true;
} }
// Create a theme observer to watch for changes // Create a theme observer to watch for changes
this.themeObserver = mql.addListener(e => { this.themeObserver = mql.addListener((e) => {
if (e.matches) { if (e.matches) {
this.systemDark = true; this.systemDark = true;
} else { } else {
@ -109,7 +109,7 @@ export default {
this.checkConnection(); this.checkConnection();
}, },
created: function() { created: function () {
window.addEventListener("beforeunload", this.handleExit); window.addEventListener("beforeunload", this.handleExit);
// Scrollwheel listener // Scrollwheel listener
window.addEventListener("wheel", this.wheelMonitor); window.addEventListener("wheel", this.wheelMonitor);
@ -131,7 +131,7 @@ export default {
// Arrow keys // Arrow keys
Mousetrap.bind( Mousetrap.bind(
["up", "down", "left", "right"], ["up", "down", "left", "right"],
event => { (event) => {
this.arrowKeysDown[event.keyCode] = true; //Add key to array this.arrowKeysDown[event.keyCode] = true; //Add key to array
this.navigateKeyHandler(); this.navigateKeyHandler();
}, },
@ -139,7 +139,7 @@ export default {
); );
Mousetrap.bind( Mousetrap.bind(
["up", "down", "left", "right"], ["up", "down", "left", "right"],
event => { (event) => {
delete this.arrowKeysDown[event.keyCode]; //Remove key from array delete this.arrowKeysDown[event.keyCode]; //Remove key from array
}, },
"keyup", "keyup",
@ -192,7 +192,7 @@ export default {
}); });
}, },
beforeDestroy: function() { beforeDestroy: function () {
// Disconnect the theme observer // Disconnect the theme observer
if (this.themeObserver) { if (this.themeObserver) {
this.themeObserver.disconnect(); this.themeObserver.disconnect();
@ -233,12 +233,12 @@ export default {
this.$store.commit("changeWaiting", false); this.$store.commit("changeWaiting", false);
} }
}, },
handleExit: function() { handleExit: function () {
this.$root.$emit("globalTogglePreview", false); this.$root.$emit("globalTogglePreview", false);
}, },
// Handle global mouse wheel events to be associated with navigation // 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 // Only capture scroll if the event target's parent contains the "scrollTarget" class
if ( if (
event.target.parentNode.classList.contains("scrollTarget") || event.target.parentNode.classList.contains("scrollTarget") ||
@ -250,7 +250,7 @@ export default {
} }
}, },
navigateKeyHandler: function() { navigateKeyHandler: function () {
// Calculate movement array // Calculate movement array
var x_rel = 0; var x_rel = 0;
var y_rel = 0; var y_rel = 0;

22
webapp/src/components/appContent.vue
View file

@ -22,7 +22,7 @@
> >
<img <img
v-if="item.iconURL" 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" :src="item.iconURL"
/> />
<span v-if="!item.iconURL" class="material-symbols-outlined"> <span v-if="!item.iconURL" class="material-symbols-outlined">
@ -112,7 +112,7 @@ export default {
TabIcon, TabIcon,
powerContent, powerContent,
}, },
data: function() { data: function () {
return { return {
currentTab: "view", currentTab: "view",
bottomTabs: [ bottomTabs: [
@ -142,7 +142,7 @@ export default {
}, },
computed: { computed: {
tabOrder: function() { tabOrder: function () {
var ind = []; var ind = [];
for (const tab of this.topTabs) { for (const tab of this.topTabs) {
ind.push(tab.id); ind.push(tab.id);
@ -153,7 +153,7 @@ export default {
return ind; return ind;
}, },
topTabs: function() { topTabs: function () {
let tabs = [ let tabs = [
{ {
id: "view", id: "view",
@ -182,21 +182,21 @@ export default {
}, },
]; ];
if (!this.$store.state.galleryEnabled) { if (!this.$store.state.galleryEnabled) {
tabs = tabs.filter(tab => tab.id != "gallery"); tabs = tabs.filter((tab) => tab.id != "gallery");
} }
return tabs; return tabs;
}, },
allTabs() { allTabs() {
return [...this.topTabs, ...this.bottomTabs]; return [...this.topTabs, ...this.bottomTabs];
}, },
currentTabIndex: function() { currentTabIndex: function () {
return this.tabOrder.indexOf(this.currentTab); return this.tabOrder.indexOf(this.currentTab);
}, },
}, },
mounted() { mounted() {
// A global signal listener to switch tab // A global signal listener to switch tab
this.$root.$on("globalSwitchTab", tabID => { this.$root.$on("globalSwitchTab", (tabID) => {
this.currentTab = tabID; this.currentTab = tabID;
}); });
// A global signal listener to increment tab // A global signal listener to increment tab
@ -213,22 +213,22 @@ export default {
}, },
methods: { methods: {
setTab: function(event, tab) { setTab: function (event, tab) {
if (!(this.currentTab == tab)) { if (!(this.currentTab == tab)) {
this.currentTab = tab; this.currentTab = tab;
} }
}, },
incrementTabBy: function(n) { incrementTabBy: function (n) {
const newIndex = const newIndex =
(((this.currentTabIndex + n) % this.tabOrder.length) + this.tabOrder.length) % (((this.currentTabIndex + n) % this.tabOrder.length) + this.tabOrder.length) %
this.tabOrder.length; this.tabOrder.length;
const newId = this.tabOrder[newIndex]; const newId = this.tabOrder[newIndex];
this.currentTab = newId; this.currentTab = newId;
}, },
startModals: function() { startModals: function () {
this.$refs.calibrationWizard.show_if_needed(); this.$refs.calibrationWizard.show_if_needed();
}, },
enterApp: function() { enterApp: function () {
// Stuff to do once connected and all init modals are finished // Stuff to do once connected and all init modals are finished
}, },
scrollToTop() { scrollToTop() {

4
webapp/src/components/genericComponents/miniStreamDisplay.vue
View file

@ -20,14 +20,14 @@
export default { export default {
name: "MiniStreamDisplay", name: "MiniStreamDisplay",
data: function() { data: function () {
return { return {
isVisible: false, isVisible: false,
}; };
}, },
computed: { computed: {
streamImgUri: function() { streamImgUri: function () {
return `${this.$store.getters.baseUri}/camera/mjpeg_stream`; return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
}, },
}, },

4
webapp/src/components/genericComponents/progressBar.vue
View file

@ -11,12 +11,12 @@ export default {
props: {}, props: {},
computed: { computed: {
tooltipOptions: function() { tooltipOptions: function () {
var title = this.id.charAt(0).toUpperCase() + this.id.slice(1); var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
return `pos: right; title: ${title}; delay: 500`; return `pos: right; title: ${title}; delay: 500`;
}, },
classObject: function() { classObject: function () {
return { return {
"tabicon-active": this.currentTab == this.id, "tabicon-active": this.currentTab == this.id,
"uk-disabled": this.requireConnection && !this.$store.getters.ready, "uk-disabled": this.requireConnection && !this.$store.getters.ready,

6
webapp/src/components/genericComponents/tabIcon.vue
View file

@ -44,7 +44,7 @@ export default {
}, },
computed: { computed: {
computedTitle: function() { computedTitle: function () {
if (this.title !== undefined) { if (this.title !== undefined) {
return this.title; return this.title;
} else { } else {
@ -55,7 +55,7 @@ export default {
} }
}, },
tooltipOptions: function() { tooltipOptions: function () {
if (this.showTooltip) { if (this.showTooltip) {
return `pos: right; title: ${this.computedTitle}; delay: 500`; return `pos: right; title: ${this.computedTitle}; delay: 500`;
} else { } else {
@ -63,7 +63,7 @@ export default {
} }
}, },
classObject: function() { classObject: function () {
return { return {
"tabicon-active": this.currentTab == this.tabID, "tabicon-active": this.currentTab == this.tabID,
"uk-disabled": this.requireConnection && !this.$store.getters.ready, "uk-disabled": this.requireConnection && !this.$store.getters.ready,

18
webapp/src/components/labThingsComponents/actionButton.vue
View file

@ -145,7 +145,7 @@ export default {
}, },
}, },
data: function() { data: function () {
return { return {
taskUrl: null, taskUrl: null,
progress: null, progress: null,
@ -245,13 +245,13 @@ export default {
} }
// Check for a task that is ongoing. // Check for a task that is ongoing.
// We can't handle multiple tasks ongoing, so this picks the first. // 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) { if (ongoingTask) {
// There is a started task // There is a started task
this.taskStarted = true; this.taskStarted = true;
this.$emit("taskStarted"); this.$emit("taskStarted");
// Find its URL // Find its URL
const taskUrl = ongoingTask.links.find(t => t.rel == "self").href; const taskUrl = ongoingTask.links.find((t) => t.rel == "self").href;
try { try {
await this.pollOngoingTask(ongoingTask.id, taskUrl); await this.pollOngoingTask(ongoingTask.id, taskUrl);
} catch (error) { } catch (error) {
@ -262,7 +262,7 @@ export default {
} }
}, },
bootstrapTask: function() { bootstrapTask: function () {
// Starts the process of creating a new Actiont ask // Starts the process of creating a new Actiont ask
if (this.requiresConfirmation) { if (this.requiresConfirmation) {
this.modalConfirm(this.confirmationMessage).then( this.modalConfirm(this.confirmationMessage).then(
@ -309,14 +309,14 @@ export default {
} }
}, },
onTaskEnd: function() { onTaskEnd: function () {
// Reset taskRunning and taskId // Reset taskRunning and taskId
this.taskRunning = false; this.taskRunning = false;
this.taskStarted = false; this.taskStarted = false;
this.$emit("finished"); this.$emit("finished");
}, },
startPolling: function(taskId, taskUrl) { startPolling: function (taskId, taskUrl) {
if (this.taskRunning != true) { if (this.taskRunning != true) {
// Starts polling an existing Action task // Starts polling an existing Action task
this.taskUrl = taskUrl; this.taskUrl = taskUrl;
@ -327,12 +327,12 @@ export default {
} }
}, },
pollTask: function(taskId, interval) { pollTask: function (taskId, interval) {
interval = interval * 1000 || 500; interval = interval * 1000 || 500;
var checkCondition = (resolve, reject) => { var checkCondition = (resolve, reject) => {
// If the condition is met, we're done! // 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; var result = response.data.status;
this.taskStatus = result; this.taskStatus = result;
if ((result == "running") | (result == "pending")) { if ((result == "running") | (result == "pending")) {
@ -382,7 +382,7 @@ export default {
this.$root.$emit("modalClosed"); this.$root.$emit("modalClosed");
}, },
terminateTask: function() { terminateTask: function () {
axios.delete(this.taskUrl, { baseURL: this.$store.getters.baseUri }); axios.delete(this.taskUrl, { baseURL: this.$store.getters.baseUri });
this.$root.$emit("modalClosed"); this.$root.$emit("modalClosed");
}, },

8
webapp/src/components/labThingsComponents/actionLogDisplay.vue
View file

@ -17,9 +17,7 @@
</div> </div>
<!-- Paused banner outside scroll container, positioned relative to wrapper --> <!-- Paused banner outside scroll container, positioned relative to wrapper -->
<div v-if="userIsHovering" class="paused-banner"> <div v-if="userIsHovering" class="paused-banner">Auto-scroll paused</div>
Auto-scroll paused
</div>
</div> </div>
</div> </div>
</template> </template>
@ -46,10 +44,10 @@ export default {
}, },
watch: { watch: {
log: function() { log: function () {
this.scrollToBottom(); this.scrollToBottom();
}, },
taskStatus: function() { taskStatus: function () {
this.scrollToBottom(); this.scrollToBottom();
}, },
}, },

4
webapp/src/components/labThingsComponents/actionProgressBar.vue
View file

@ -22,12 +22,12 @@ export default {
}, },
computed: { computed: {
barWidthFromProgress: function() { barWidthFromProgress: function () {
var progress = this.progress <= 100 ? this.progress : 100; var progress = this.progress <= 100 ? this.progress : 100;
var styleString = `width: ${progress}%`; var styleString = `width: ${progress}%`;
return styleString; return styleString;
}, },
indeterminateProgressBar: function() { indeterminateProgressBar: function () {
if (this.taskStatus == "pending") return true; if (this.taskStatus == "pending") return true;
if ((this.taskStatus == "running") & !this.progress) { if ((this.taskStatus == "running") & !this.progress) {
return true; return true;

28
webapp/src/components/labThingsComponents/inputFromSchema.vue
View file

@ -128,7 +128,7 @@ export default {
}; };
}, },
computed: { computed: {
internalLabels: function() { internalLabels: function () {
if (this.dataType == "number_object") { if (this.dataType == "number_object") {
let labels = {}; let labels = {};
for (const key in this.internalValue) { for (const key in this.internalValue) {
@ -138,7 +138,7 @@ export default {
} }
return []; return [];
}, },
valueLength: function() { valueLength: function () {
if (this.dataType == "number_array") { if (this.dataType == "number_array") {
if (this.internalValue == undefined) { if (this.internalValue == undefined) {
return 0; return 0;
@ -148,7 +148,7 @@ export default {
return 1; return 1;
} }
}, },
dataType: function() { dataType: function () {
let prop = this.dataSchema; let prop = this.dataSchema;
if (prop == undefined) { if (prop == undefined) {
return "undefined"; return "undefined";
@ -162,7 +162,7 @@ export default {
return "number_array"; return "number_array";
} }
if (Array.isArray(prop.items)) { 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"; return "number_array";
} }
} }
@ -210,46 +210,46 @@ export default {
}, },
methods: { methods: {
resetInternalValue: function() { resetInternalValue: function () {
// Whenever updatirng th internal value stringify and parse as a form of deepcopy. // 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 // This ensure that the this.value prop is not mutated for when elements of arrays
// or objects are updated. // or objects are updated.
this.internalValue = JSON.parse(JSON.stringify(this.value)); this.internalValue = JSON.parse(JSON.stringify(this.value));
}, },
requestUpdate: async function() { requestUpdate: async function () {
this.$emit("requestUpdate"); this.$emit("requestUpdate");
}, },
sendValue: async function() { sendValue: async function () {
this.$emit("sendValue", this.internalValue); this.$emit("sendValue", this.internalValue);
}, },
checkboxUpdated: function() { checkboxUpdated: function () {
if (this.internalValue != this.$refs.checkbox.checked) { if (this.internalValue != this.$refs.checkbox.checked) {
this.internalValue = this.$refs.checkbox.checked; this.internalValue = this.$refs.checkbox.checked;
this.sendValue(); this.sendValue();
} }
}, },
focusIn: function(event) { focusIn: function (event) {
this.valueOnEnter = event.target.value; this.valueOnEnter = event.target.value;
}, },
focusOut: function(event) { focusOut: function (event) {
if (this.valueOnEnter != event.target.value) { if (this.valueOnEnter != event.target.value) {
this.sendValue(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. // Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) { if (event.keyCode == 13) {
this.sendValue(); this.sendValue();
} }
}, },
updateIsEdited: function() { updateIsEdited: function () {
this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value); this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
}, },
animationEnd: function() { animationEnd: function () {
this.animateUpdate = false; this.animateUpdate = false;
this.$emit("animationShown"); this.$emit("animationShown");
}, },
deepStringify: function(val) { deepStringify: function (val) {
// Create a json string where all internal numbers are also JSON strings. This is // 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 // 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 // number but anything typed in the input is a string. In the case of arrays or

14
webapp/src/components/labThingsComponents/propertyControl.vue
View file

@ -54,7 +54,7 @@ export default {
}, },
computed: { computed: {
propertyDescription: function() { propertyDescription: function () {
try { try {
return this.thingDescription(this.thingName).properties[this.propertyName]; return this.thingDescription(this.thingName).properties[this.propertyName];
} catch (error) { } catch (error) {
@ -64,13 +64,13 @@ export default {
}, },
watch: { watch: {
propertyDescription: function() { propertyDescription: function () {
// Ensure we read the property once the URL is known // Ensure we read the property once the URL is known
this.readProperty(); this.readProperty();
}, },
}, },
mounted: function() { mounted: function () {
// Read the property when we're mounted - usually this won't // Read the property when we're mounted - usually this won't
// work because the URL isn't set yet. However, it's helpful if // work because the URL isn't set yet. However, it's helpful if
// the app is reloaded (e.g. from a dev server). // the app is reloaded (e.g. from a dev server).
@ -80,17 +80,17 @@ export default {
}, },
methods: { methods: {
readProperty: async function() { readProperty: async function () {
let data = await this.readThingProperty(this.thingName, this.propertyName); let data = await this.readThingProperty(this.thingName, this.propertyName);
this.value = data; this.value = data;
return data; return data;
}, },
writeProperty: async function(requestedValue) { writeProperty: async function (requestedValue) {
try { try {
this.value = requestedValue; this.value = requestedValue;
await this.writeThingProperty(this.thingName, this.propertyName, requestedValue); await this.writeThingProperty(this.thingName, this.propertyName, requestedValue);
if (this.readBack) { if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay)); await new Promise((r) => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty(); let newVal = await this.readProperty();
if (newVal == requestedValue) { if (newVal == requestedValue) {
this.animate = true; this.animate = true;
@ -112,7 +112,7 @@ export default {
this.readProperty(); this.readProperty();
} }
}, },
resetAnimate: function() { resetAnimate: function () {
this.animate = false; this.animate = false;
}, },
}, },

2
webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
View file

@ -33,7 +33,7 @@ export default {
}, },
methods: { methods: {
actionResponse: function() { actionResponse: function () {
if (this.actionData.notify_on_success) { if (this.actionData.notify_on_success) {
this.modalNotify(this.actionData.success_message); this.modalNotify(this.actionData.success_message);
} }

2
webapp/src/components/loadingContent.vue
View file

@ -21,7 +21,7 @@ export default {
components: { devTools }, components: { devTools },
data: function() { data: function () {
return {}; return {};
}, },
}; };

20
webapp/src/components/modalComponents/calibrationWizard.vue
View file

@ -30,7 +30,7 @@ export default {
components: {}, components: {},
data: function() { data: function () {
return { return {
isNeeded: undefined, isNeeded: undefined,
availableCalibrationTasks: {}, availableCalibrationTasks: {},
@ -91,7 +91,7 @@ export default {
return needsCalibration; return needsCalibration;
}, },
resetData: function() { resetData: function () {
this.movingBackward = false; this.movingBackward = false;
this.taskIndex = 0; this.taskIndex = 0;
}, },
@ -99,7 +99,7 @@ export default {
/** /**
* Create the calibration wizard task list dynamically. * Create the calibration wizard task list dynamically.
*/ */
create_task_list: function(thingsToCal, includeWelcome = true) { create_task_list: function (thingsToCal, includeWelcome = true) {
const tasks = []; const tasks = [];
// Optionally include the welcome screen // Optionally include the welcome screen
@ -125,7 +125,7 @@ export default {
this.tasks = tasks; 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. // Check if the calibration modal is needed, and only show it if it is.
let thingsToCal = await this.check_things_needing_calibration(); let thingsToCal = await this.check_things_needing_calibration();
const needed = thingsToCal.length > 0; const needed = thingsToCal.length > 0;
@ -142,7 +142,7 @@ export default {
}, },
// Forces modal to show on button press // Forces modal to show on button press
force_show: function() { force_show: function () {
const allThings = Object.keys(this.availableCalibrationTasks); const allThings = Object.keys(this.availableCalibrationTasks);
this.resetData(); this.resetData();
@ -150,26 +150,26 @@ export default {
this.show(); this.show();
}, },
show: function() { show: function () {
// Show the modal element // Show the modal element
var el = this.$refs["calibrationModalEl"]; var el = this.$refs["calibrationModalEl"];
this.showModalElement(el); // Calls the mixin this.showModalElement(el); // Calls the mixin
}, },
hide: function() { hide: function () {
// Show the modal // Show the modal
var el = this.$refs["calibrationModalEl"]; var el = this.$refs["calibrationModalEl"];
this.hideModalElement(el); // Calls the mixin this.hideModalElement(el); // Calls the mixin
}, },
onHide: function() { onHide: function () {
this.$emit("onClose"); this.$emit("onClose");
}, },
/* /*
* Move to the previous task. * Move to the previous task.
*/ */
previousTask: function() { previousTask: function () {
this.movingBackward = true; this.movingBackward = true;
if (this.taskIndex > 0) { if (this.taskIndex > 0) {
this.taskIndex = this.taskIndex - 1; 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. * Move to the next task or close the modal if this is the final task.
*/ */
nextTask: function() { nextTask: function () {
this.movingBackward = false; this.movingBackward = false;
if (this.taskIndex < this.tasks.length - 1) { if (this.taskIndex < this.tasks.length - 1) {
this.taskIndex = this.taskIndex + 1; this.taskIndex = this.taskIndex + 1;

4
webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
View file

@ -87,7 +87,7 @@ export default {
/* /*
* Move to the previous step in this task, or the previous task if first step. * Move to the previous step in this task, or the previous task if first step.
*/ */
previousStep: function() { previousStep: function () {
if (this.stepIndex > 0) { if (this.stepIndex > 0) {
this.stepIndex = this.stepIndex - 1; this.stepIndex = this.stepIndex - 1;
} else { } else {
@ -98,7 +98,7 @@ export default {
/* /*
* Move to the next step in this task, or the next task if final step. * 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) { if (this.stepIndex < this.steps.length - 1) {
this.stepIndex = this.stepIndex + 1; this.stepIndex = this.stepIndex + 1;
return true; return true;

4
webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
View file

@ -1,9 +1,7 @@
<template> <template>
<div> <div>
<p> <p>
<b> <b> Before starting camera calibration: </b>
Before starting camera calibration:
</b>
</p> </p>
<ul class="uk-list uk-list-bullet"> <ul class="uk-list uk-list-bullet">
<li>Remove any samples from your microscope</li> <li>Remove any samples from your microscope</li>

2
webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
View file

@ -25,7 +25,7 @@ export default {
}, },
computed: { computed: {
cameraUri: function() { cameraUri: function () {
return `${this.$store.getters.baseUri}/camera/`; return `${this.$store.getters.baseUri}/camera/`;
}, },
}, },

2
webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
View file

@ -28,7 +28,7 @@ export default {
}, },
}, },
data: function() { data: function () {
return { return {
steps: [{ component: camCalibrationExplanation }, { component: cameraMainCalibrationStep }], steps: [{ component: camCalibrationExplanation }, { component: cameraMainCalibrationStep }],
}; };

2
webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
View file

@ -29,7 +29,7 @@ export default {
}, },
}, },
data: function() { data: function () {
return { return {
steps: [{ component: csmExplanation }, { component: focusStep }, { component: runCsmStep }], steps: [{ component: csmExplanation }, { component: focusStep }, { component: runCsmStep }],
}; };

8
webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue
View file

@ -1,12 +1,8 @@
<template> <template>
<div> <div>
<p>Camera-stage mapping will calibrate the stage movement using the camera.</p>
<p> <p>
Camera-stage mapping will calibrate the stage movement using the camera. <b> Before starting camera-stage mapping: </b>
</p>
<p>
<b>
Before starting camera-stage mapping:
</b>
</p> </p>
<ul class="uk-list uk-list-bullet"> <ul class="uk-list uk-list-bullet">
<li>Add a sample with dense features to the microscope.</li> <li>Add a sample with dense features to the microscope.</li>

4
webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
View file

@ -1,8 +1,6 @@
<template> <template>
<stepTemplateWithStream> <stepTemplateWithStream>
<p> <p>Use the buttons below to bring the sample into focus.</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> <p>You may also adjust the z position with <b>page up</b> and <b>page down</b>.</p>
<template #below-stream> <template #below-stream>
<div class="action-button-container"> <div class="action-button-container">

8
webapp/src/components/modalComponents/calibrationWizardComponents/finalStep.vue
View file

@ -3,12 +3,8 @@
<p> <p>
<b>Calibration complete</b> <b>Calibration complete</b>
</p> </p>
<p> <p>You'll need to repeat these steps from the Settings tab if you swap your objective.</p>
You'll need to repeat these steps from the Settings tab if you swap your objective. <p>Click Finish to return to your microscope.</p>
</p>
<p>
Click Finish to return to your microscope.
</p>
</div> </div>
</template> </template>

2
webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
View file

@ -52,7 +52,7 @@ export default {
}, },
}, },
data: function() { data: function () {
return { return {
steps: [{ component: this.stepComponent, props: this.stepProps }], steps: [{ component: this.stepComponent, props: this.stepProps }],
}; };

4
webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue
View file

@ -1,9 +1,7 @@
<template> <template>
<div> <div>
<p> <p>
<b> <b> Some important microscope calibration data is currently missing. </b>
Some important microscope calibration data is currently missing.
</b>
</p> </p>
<p> <p>
Your microscope will still function, however some functionality will be limited, and image Your microscope will still function, however some functionality will be limited, and image

8
webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
View file

@ -7,9 +7,7 @@
<input v-model="reloadWhenOverridingOrigin" class="uk-input uk-checkbox" type="checkbox" /> <input v-model="reloadWhenOverridingOrigin" class="uk-input uk-checkbox" type="checkbox" />
Reload web app with new origin Reload web app with new origin
</label> </label>
<button class="uk-button uk-button-default uk-margin-small"> <button class="uk-button uk-button-default uk-margin-small">Apply</button>
Apply
</button>
</form> </form>
</div> </div>
</template> </template>
@ -21,7 +19,7 @@ export default {
components: {}, components: {},
data: function() { data: function () {
return { return {
newOrigin: this.$store.state.overrideOrigin, newOrigin: this.$store.state.overrideOrigin,
reloadWhenOverridingOrigin: true, reloadWhenOverridingOrigin: true,
@ -29,7 +27,7 @@ export default {
}, },
methods: { methods: {
overrideAPIHost: function(event) { overrideAPIHost: function (event) {
// Save the origin override, so that if we reload the web app, you can easily // Save the origin override, so that if we reload the web app, you can easily
this.$store.commit("changeOverrideOrigin", this.newOrigin); this.$store.commit("changeOverrideOrigin", this.newOrigin);

8
webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
View file

@ -50,9 +50,7 @@
<hr /> <hr />
</div> </div>
<div v-else-if="$store.state.waiting"> <div v-else-if="$store.state.waiting">Loading...</div>
Loading...
</div>
<div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div> <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
<div v-else>No active connection</div> <div v-else>No active connection</div>
</div> </div>
@ -65,7 +63,7 @@ export default {
name: "StatusPane", name: "StatusPane",
components: { ActionButton }, components: { ActionButton },
data: function() { data: function () {
return { return {
version: undefined, version: undefined,
version_source: undefined, version_source: undefined,
@ -73,7 +71,7 @@ export default {
}, },
computed: { computed: {
things: function() { things: function () {
return this.$store.getters["wot/thingDescriptions"]; return this.$store.getters["wot/thingDescriptions"];
}, },
}, },

6
webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
View file

@ -89,18 +89,18 @@ export default {
let label = r.output[0] ? "sample" : "background"; let label = r.output[0] ? "sample" : "background";
this.modalNotify(`Current image is ${label} (${r.output[1]})`); this.modalNotify(`Current image is ${label} (${r.output[1]})`);
}, },
readSettings: async function() { readSettings: async function () {
this.backgroundDetectorStatus = await this.readThingProperty( this.backgroundDetectorStatus = await this.readThingProperty(
"camera", "camera",
"background_detector_status", "background_detector_status",
); );
}, },
writeSettings: async function(requestedValue) { writeSettings: async function (requestedValue) {
await this.invokeAction("camera", "update_detector_settings", { data: requestedValue }); await this.invokeAction("camera", "update_detector_settings", { data: requestedValue });
this.animate = true; this.animate = true;
this.readSettings(); this.readSettings();
}, },
resetAnimate: function() { resetAnimate: function () {
this.animate = false; this.animate = false;
}, },
}, },

20
webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
View file

@ -139,9 +139,7 @@
</div> </div>
<div v-else class="uk-text-warning"> <div v-else class="uk-text-warning">
<p>Stage positioning is disabled since no stage is connected.</p> <p>Stage positioning is disabled since no stage is connected.</p>
<p> <p>Please check all data and power connections to your motor controller board.</p>
Please check all data and power connections to your motor controller board.
</p>
</div> </div>
</div> </div>
</template> </template>
@ -160,7 +158,7 @@ export default {
syncPropertyButton, syncPropertyButton,
}, },
data: function() { data: function () {
return { return {
setPosition: null, setPosition: null,
isAutofocusing: 0, isAutofocusing: 0,
@ -178,13 +176,13 @@ export default {
invert() { invert() {
return this.$store.state.navigationInvert; return this.$store.state.navigationInvert;
}, },
baseUri: function() { baseUri: function () {
return this.$store.getters.baseUri; return this.$store.getters.baseUri;
}, },
positionStatusUri: function() { positionStatusUri: function () {
return `${this.baseUri}/stage/position`; return `${this.baseUri}/stage/position`;
}, },
moveInImageCoordinatesUri: function() { moveInImageCoordinatesUri: function () {
return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates"); return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
}, },
}, },
@ -235,7 +233,7 @@ export default {
methods: { methods: {
timeout(ms) { timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise((resolve) => setTimeout(resolve, ms));
}, },
async move(x, y, z, absolute) { async move(x, y, z, absolute) {
// Move the stage, by updating the controls and starting a move task // Move the stage, by updating the controls and starting a move task
@ -260,7 +258,7 @@ export default {
async startMoveTask() { async startMoveTask() {
await this.$refs.moveButton.startTask(); await this.$refs.moveButton.startTask();
}, },
moveInImageCoordinatesRequest: function(x, y) { moveInImageCoordinatesRequest: function (x, y) {
// If not movement-locked // If not movement-locked
if (!this.moveLock) { if (!this.moveLock) {
// Lock move requests // Lock move requests
@ -281,7 +279,7 @@ export default {
.then(() => { .then(() => {
this.updatePosition(); // Update the position in text boxes this.updatePosition(); // Update the position in text boxes
}) })
.catch(error => { .catch((error) => {
this.modalError(error); // Let mixin handle error this.modalError(error); // Let mixin handle error
}) })
.then(() => { .then(() => {
@ -294,7 +292,7 @@ export default {
this.setPosition = await this.readThingProperty("stage", "position"); this.setPosition = await this.readThingProperty("stage", "position");
}, },
handleCaptureResponse: async function(response) { handleCaptureResponse: async function (response) {
// Retrieve the captured image and save it // Retrieve the captured image and save it
let imageUri = response.output.href; let imageUri = response.output.href;
if (!imageUri) { if (!imageUri) {

18
webapp/src/components/tabContentComponents/loggingContent.vue
View file

@ -92,7 +92,7 @@ export default {
EndpointButton, EndpointButton,
}, },
data: function() { data: function () {
return { return {
maxitems: 20, maxitems: 20,
page: 1, page: 1,
@ -103,11 +103,11 @@ export default {
}, },
computed: { computed: {
filteredLevels: function() { filteredLevels: function () {
let cutoffIndex = this.allLevels.indexOf(this.filterLevel); let cutoffIndex = this.allLevels.indexOf(this.filterLevel);
return this.allLevels.slice(cutoffIndex, -1); return this.allLevels.slice(cutoffIndex, -1);
}, },
filteredItems: function() { filteredItems: function () {
var items = []; var items = [];
for (var item of this.logs) { for (var item of this.logs) {
// Add to capture list if matched // Add to capture list if matched
@ -118,17 +118,17 @@ export default {
return items; return items;
}, },
logURI: function() { logURI: function () {
return `${this.$store.getters.baseUri}/log/`; return `${this.$store.getters.baseUri}/log/`;
}, },
logFileURI: function() { logFileURI: function () {
return `${this.$store.getters.baseUri}/logfile/`; return `${this.$store.getters.baseUri}/logfile/`;
}, },
pagedItems: function() { pagedItems: function () {
let startIndex = (this.page - 1) * this.maxitems; let startIndex = (this.page - 1) * this.maxitems;
return this.filteredItems.slice(startIndex, startIndex + this.maxitems); return this.filteredItems.slice(startIndex, startIndex + this.maxitems);
}, },
numberOfPages: function() { numberOfPages: function () {
return Math.floor(this.filteredItems.length / this.maxitems); return Math.floor(this.filteredItems.length / this.maxitems);
}, },
}, },
@ -190,12 +190,12 @@ export default {
} }
this.logs = logs.reverse(); // Display in reverse chronological order this.logs = logs.reverse(); // Display in reverse chronological order
}, },
formatDateTime: function(isoDateTimeString) { formatDateTime: function (isoDateTimeString) {
isoDateTimeString = isoDateTimeString.replace(",", "."); isoDateTimeString = isoDateTimeString.replace(",", ".");
let date = new Date(isoDateTimeString); let date = new Date(isoDateTimeString);
return date.toLocaleDateString() + " " + date.toLocaleTimeString(); return date.toLocaleDateString() + " " + date.toLocaleTimeString();
}, },
escapeText: function(unsafeText) { escapeText: function (unsafeText) {
let div = document.createElement("div"); let div = document.createElement("div");
div.innerText = unsafeText; div.innerText = unsafeText;
return div.innerHTML; return div.innerHTML;

6
webapp/src/components/tabContentComponents/powerContent.vue
View file

@ -35,14 +35,14 @@ export default {
components: {}, components: {},
data: function() { data: function () {
return { return {
isRaspberrypi: undefined, isRaspberrypi: undefined,
}; };
}, },
computed: { computed: {
things: function() { things: function () {
return this.$store.getters["wot/thingDescriptions"]; return this.$store.getters["wot/thingDescriptions"];
}, },
}, },
@ -52,7 +52,7 @@ export default {
}, },
methods: { methods: {
systemRequest: function(action) { systemRequest: function (action) {
let message = ""; let message = "";
if (action == "reboot") { if (action == "reboot") {
message = "Restart microscope?"; message = "Restart microscope?";

2
webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
View file

@ -29,7 +29,7 @@ export default {
}, },
}, },
data: function() { data: function () {
return { return {
osdViewer: null, osdViewer: null,
}; };

14
webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
View file

@ -35,9 +35,7 @@
button-label="Download JPEG" button-label="Download JPEG"
/> />
</div> </div>
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan"> <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
Delete
</button>
<action-button <action-button
v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)" v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)"
submit-label="Stitch Images" submit-label="Stitch Images"
@ -121,14 +119,8 @@ export default {
let yyyy = d.getFullYear(); let yyyy = d.getFullYear();
let mm = d.getMonth() + 1; let mm = d.getMonth() + 1;
let dd = d.getDate(); let dd = d.getDate();
let HH = d let HH = d.getHours().toString().padStart(2, "0");
.getHours() let MM = d.getMinutes().toString().padStart(2, "0");
.toString()
.padStart(2, "0");
let MM = d
.getMinutes()
.toString()
.padStart(2, "0");
return `${HH}:${MM} ${dd}/${mm}/${yyyy}`; return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
}, },
formatDuration(duration) { formatDuration(duration) {

16
webapp/src/components/tabContentComponents/scanListContent.vue
View file

@ -18,9 +18,7 @@
:button-primary="false" :button-primary="false"
:modal-progress="true" :modal-progress="true"
:requires-confirmation="true" :requires-confirmation="true"
:confirmation-message=" :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.'"
'<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" @error="modalError"
/> />
</div> </div>
@ -62,9 +60,7 @@
<div class="gallery-grid uk-grid-match" uk-grid> <div class="gallery-grid uk-grid-match" uk-grid>
<div v-if="scansEmpty"> <div v-if="scansEmpty">
<h2>No scans available</h2> <h2>No scans available</h2>
<p> <p>There are no scans available to show.</p>
There are no scans available to show.
</p>
</div> </div>
<div v-for="scanData in paginatedScans" :key="scanData.id"> <div v-for="scanData in paginatedScans" :key="scanData.id">
<scan-card <scan-card
@ -110,7 +106,7 @@ export default {
name: "ScanListContent", name: "ScanListContent",
components: { actionButton, scanCard, ScanViewerModal }, components: { actionButton, scanCard, ScanViewerModal },
data: function() { data: function () {
return { return {
scans: [], scans: [],
ongoing: null, ongoing: null,
@ -162,13 +158,13 @@ export default {
}); });
}, },
created: function() { created: function () {
// Watch for host 'ready', then update status // Watch for host 'ready', then update status
this.unwatchStoreFunction = this.$store.watch( this.unwatchStoreFunction = this.$store.watch(
(state, getters) => { (state, getters) => {
return getters.ready; return getters.ready;
}, },
ready => { (ready) => {
if (ready) { if (ready) {
// If the connection is now ready, update capture list // If the connection is now ready, update capture list
this.updateScans(); this.updateScans();
@ -205,7 +201,7 @@ export default {
if (!scans | (scans.length == 0)) { if (!scans | (scans.length == 0)) {
this.scans = scans; this.scans = scans;
} }
scans.forEach(scan => { scans.forEach((scan) => {
scan.can_stitch = !scan.stitch_available && scan.number_of_images > 3; scan.can_stitch = !scan.stitch_available && scan.number_of_images > 3;
}); });
scans.sort((a, b) => { scans.sort((a, b) => {

16
webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
View file

@ -6,9 +6,7 @@
:button-primary="true" :button-primary="true"
:can-terminate="true" :can-terminate="true"
:requires-confirmation="true" :requires-confirmation="true"
:confirmation-message=" :confirmation-message="'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'"
'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" thing="camera_stage_mapping"
action="calibrate_xy" action="calibrate_xy"
:submit-label="'Auto-Calibrate Using Camera'" :submit-label="'Auto-Calibrate Using Camera'"
@ -26,9 +24,9 @@
> >
Download Calibration Data Download Calibration Data
</button> </button>
<div v-if="csmMatrix != 'undefined'" style="margin:10px;"> <div v-if="csmMatrix != 'undefined'" style="margin: 10px">
<details <details>
><summary>Calibration Details</summary> <summary>Calibration Details</summary>
<strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong> <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
<ul> <ul>
<li> <li>
@ -84,7 +82,7 @@ export default {
this.updateDisplayedCSM(); this.updateDisplayedCSM();
} }
}, },
getCalibrationData: async function() { getCalibrationData: async function () {
try { try {
let data = await this.readThingProperty("camera_stage_mapping", "last_calibration"); let data = await this.readThingProperty("camera_stage_mapping", "last_calibration");
if (data == {}) { if (data == {}) {
@ -101,7 +99,7 @@ export default {
this.modalError(error); // Let mixin handle error this.modalError(error); // Let mixin handle error
} }
}, },
updateDisplayedCSM: async function() { updateDisplayedCSM: async function () {
let csmMatrix = await this.readThingProperty( let csmMatrix = await this.readThingProperty(
"camera_stage_mapping", "camera_stage_mapping",
"image_to_stage_displacement_matrix", "image_to_stage_displacement_matrix",
@ -121,7 +119,7 @@ export default {
Number(((streamResolution[1] ** 2 * this.csmRatio) / this.csmResolution[0]).toFixed(0)), Number(((streamResolution[1] ** 2 * this.csmRatio) / this.csmResolution[0]).toFixed(0)),
]; ];
}, },
onRecalibrateResponse: function() { onRecalibrateResponse: function () {
this.modalNotify("Finished stage-to-camera calibration."); this.modalNotify("Finished stage-to-camera calibration.");
this.updateDisplayedCSM(); this.updateDisplayedCSM();
}, },

2
webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue
View file

@ -23,7 +23,7 @@
export default { export default {
name: "AppSettings", name: "AppSettings",
data: function() { data: function () {
return {}; return {};
}, },

2
webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
View file

@ -43,7 +43,7 @@ export default {
}, },
computed: { computed: {
cameraUri: function() { cameraUri: function () {
return `${this.$store.getters.baseUri}/camera/`; return `${this.$store.getters.baseUri}/camera/`;
}, },
}, },

12
webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
View file

@ -4,16 +4,12 @@
<div> <div>
<div class="uk-margin"> <div class="uk-margin">
<p>Your z motor is currently {{ z_inverted }} inverted.</p> <p>Your z motor is currently {{ z_inverted }} inverted.</p>
<p> <p>We expect that moving in +z:</p>
We expect that moving in +z:
</p>
<ul> <ul>
<li>Moves your objective up, towards the sample and illumination</li> <li>Moves your objective up, towards the sample and illumination</li>
<li>Turns the exposed z gear anti-clockwise (when viewed from above)</li> <li>Turns the exposed z gear anti-clockwise (when viewed from above)</li>
</ul> </ul>
<p> <p>If this is not the case, click the button below to switch.</p>
If this is not the case, click the button below to switch.
</p>
<div class="uk-margin"> <div class="uk-margin">
<div class="uk-margin"> <div class="uk-margin">
<action-button <action-button
@ -41,14 +37,14 @@ export default {
ActionButton, ActionButton,
}, },
data: function() { data: function () {
return { return {
z_inverted: "", z_inverted: "",
}; };
}, },
computed: { computed: {
stageType: function() { stageType: function () {
return this.thingDescription("stage").title; return this.thingDescription("stage").title;
}, },
}, },

6
webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
View file

@ -6,9 +6,7 @@
><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web ><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web
Stream</label Stream</label
> >
<p class="uk-margin-small"> <p class="uk-margin-small">This will disable the embedded web stream of the camera.</p>
This will disable the embedded web stream of the camera.
</p>
</div> </div>
</div> </div>
</template> </template>
@ -18,7 +16,7 @@
export default { export default {
name: "StreamSettings", name: "StreamSettings",
data: function() { data: function () {
return {}; return {};
}, },

6
webapp/src/components/tabContentComponents/settingsContent.vue
View file

@ -123,7 +123,7 @@ export default {
calibrationWizard, calibrationWizard,
}, },
data: function() { data: function () {
return { return {
selected: "display", selected: "display",
currentTab: "display", currentTab: "display",
@ -131,12 +131,12 @@ export default {
}, },
methods: { methods: {
setTab: function(event, tab) { setTab: function (event, tab) {
if (!(this.currentTab == tab)) { if (!(this.currentTab == tab)) {
this.currentTab = tab; this.currentTab = tab;
} }
}, },
startModals: function() { startModals: function () {
this.$refs.calibrationWizard.force_show(); this.$refs.calibrationWizard.force_show();
}, },
}, },

10
webapp/src/components/tabContentComponents/slideScanContent.vue
View file

@ -1,7 +1,5 @@
<template> <template>
<div v-if="!backendOK" class="uk-alert-danger"> <div v-if="!backendOK" class="uk-alert-danger">No scan back-end found.</div>
No scan back-end found.
</div>
<!-- Grid managing tab content --> <!-- Grid managing tab content -->
<div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove"> <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="control-component uk-padding-small"> <div class="control-component uk-padding-small">
@ -101,9 +99,7 @@
</div> </div>
</div> </div>
<div v-show="scanning"> <div v-show="scanning">
<h2 v-if="displayImageOnRight" style="text-align: center;"> <h2 v-if="displayImageOnRight" style="text-align: center">Live stitching preview</h2>
Live stitching preview
</h2>
<mini-stream-display v-if="displayImageOnRight" /> <mini-stream-display v-if="displayImageOnRight" />
<action-log-display id="log-display" :log="log" :task-status="taskStatus" /> <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
<action-progress-bar :progress="progress" :task-status="taskStatus" /> <action-progress-bar :progress="progress" :task-status="taskStatus" />
@ -199,7 +195,7 @@ export default {
}, },
methods: { methods: {
onScanError: function(error) { onScanError: function (error) {
this.scanRunning = false; this.scanRunning = false;
this.modalError(error); this.modalError(error);
}, },

24
webapp/src/components/tabContentComponents/streamContent.vue
View file

@ -39,7 +39,7 @@
export default { export default {
name: "StreamDisplay", name: "StreamDisplay",
data: function() { data: function () {
return { return {
isVisible: false, isVisible: false,
displaySize: [0, 0], displaySize: [0, 0],
@ -49,14 +49,14 @@ export default {
}, },
computed: { computed: {
streamEnabled: function() { streamEnabled: function () {
return this.$store.getters.ready && !this.$store.state.disableStream; return this.$store.getters.ready && !this.$store.state.disableStream;
}, },
thisStreamOpen: function() { thisStreamOpen: function () {
// Only a single MJPEG connection should be open at a time // Only a single MJPEG connection should be open at a time
return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0); return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
}, },
streamImgUri: function() { streamImgUri: function () {
return `${this.$store.getters.baseUri}/camera/mjpeg_stream`; return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
}, },
}, },
@ -77,11 +77,11 @@ export default {
this.sizeObserver.observe(streamDisplayElement); this.sizeObserver.observe(streamDisplayElement);
}, },
created: function() { created: function () {
// Do nothing: preview stream now runs all the time // Do nothing: preview stream now runs all the time
}, },
beforeDestroy: function() { beforeDestroy: function () {
// Remove global signal listener to change the GPU preview state // Remove global signal listener to change the GPU preview state
this.$root.$off("globalTogglePreview"); this.$root.$off("globalTogglePreview");
// Remove global signal listener to flash the stream element // Remove global signal listener to flash the stream element
@ -96,18 +96,18 @@ export default {
visibilityChanged(isVisible) { visibilityChanged(isVisible) {
this.isVisible = isVisible; this.isVisible = isVisible;
}, },
flashStream: function() { flashStream: function () {
// Run an animation that flashes the stream (for capture feedback) // Run an animation that flashes the stream (for capture feedback)
let element = this.$refs.streamDisplay; let element = this.$refs.streamDisplay;
element.classList.remove("uk-animation-fade"); element.classList.remove("uk-animation-fade");
element.offsetHeight; /* trigger reflow */ element.offsetHeight; /* trigger reflow */
element.classList.add("uk-animation-fade"); element.classList.add("uk-animation-fade");
setTimeout(function() { setTimeout(function () {
element.classList.remove("uk-animation-fade"); element.classList.remove("uk-animation-fade");
}, 800); }, 800);
}, },
clickMonitor: function(event) { clickMonitor: function (event) {
// Calculate steps from event coordinates // Calculate steps from event coordinates
let xCoordinate = event.offsetX; let xCoordinate = event.offsetX;
let yCoordinate = event.offsetY; let yCoordinate = event.offsetY;
@ -129,13 +129,13 @@ export default {
this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative); this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
}, },
handleResize: function() { handleResize: function () {
// Only fires resize event after no resize in 500ms (prevents resize event spam) // Only fires resize event after no resize in 500ms (prevents resize event spam)
clearTimeout(this.resizeTimeoutId); clearTimeout(this.resizeTimeoutId);
this.resizeTimeoutId = setTimeout(this.handleDoneResize, 250); this.resizeTimeoutId = setTimeout(this.handleDoneResize, 250);
}, },
handleDoneResize: function() { handleDoneResize: function () {
// Recalculate size // Recalculate size
this.recalculateSize(); this.recalculateSize();
@ -151,7 +151,7 @@ export default {
} }
}, },
recalculateSize: function() { recalculateSize: function () {
// Calculate stream size // Calculate stream size
let element = this.$refs.streamDisplay.parentNode; let element = this.$refs.streamDisplay.parentNode;
let bound = element.getBoundingClientRect(); let bound = element.getBoundingClientRect();

28
webapp/src/main.js
View file

@ -80,7 +80,7 @@ Vue.mixin({
); );
return url; return url;
}, },
modalConfirm: function(modalText) { modalConfirm: function (modalText) {
var context = this; var context = this;
// Stop GPU preview to show modal // Stop GPU preview to show modal
@ -89,18 +89,18 @@ Vue.mixin({
// force OK to be capitalised // force OK to be capitalised
UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" }; UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
var showModal = function(resolve, reject) { var showModal = function (resolve, reject) {
UIkit.modal UIkit.modal
.confirm(modalText, { stack: true }) .confirm(modalText, { stack: true })
.then( .then(
function() { function () {
resolve(); resolve();
}, },
function() { function () {
reject(); reject();
}, },
) )
.finally(function() { .finally(function () {
// Re-enable the GPU preview, if it was active before the modal // Re-enable the GPU preview, if it was active before the modal
if (context.$store.state.autoGpuPreview) { if (context.$store.state.autoGpuPreview) {
context.$root.$emit("globalTogglePreview", true); context.$root.$emit("globalTogglePreview", true);
@ -111,14 +111,14 @@ Vue.mixin({
return new Promise(showModal); return new Promise(showModal);
}, },
modalNotify: function(message, status = "success") { modalNotify: function (message, status = "success") {
UIkit.notification({ UIkit.notification({
message: message, message: message,
status: status, status: status,
}); });
}, },
modalDialog: function(title, message) { modalDialog: function (title, message) {
UIkit.modal.dialog( UIkit.modal.dialog(
` `
<button class="uk-modal-close-default" type="button" uk-close></button> <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); var errormsg = this.getErrorMessage(error);
this.$store.commit("setErrorMessage", errormsg); this.$store.commit("setErrorMessage", errormsg);
UIkit.notification({ UIkit.notification({
@ -142,7 +142,7 @@ Vue.mixin({
}); });
}, },
getErrorMessage: function(error) { getErrorMessage: function (error) {
// Format the error. // Format the error.
let data = this.getErrorData(error); let data = this.getErrorData(error);
// Get error data may get an object. Handle edge cases and if not try to use // 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); return String(data);
} }
}, },
getErrorData: function(error) { getErrorData: function (error) {
// If a response was obtained, extract the most specific message // If a response was obtained, extract the most specific message
if (error.response) { if (error.response) {
// If the response is a nicely formatted JSON response from the server // If the response is a nicely formatted JSON response from the server
@ -182,15 +182,15 @@ Vue.mixin({
return error; return error;
}, },
showModalElement: function(element) { showModalElement: function (element) {
UIkit.modal(element).show(); UIkit.modal(element).show();
}, },
hideModalElement: function(element) { hideModalElement: function (element) {
UIkit.modal(element).hide(); UIkit.modal(element).hide();
}, },
toggleModalElement: function(element) { toggleModalElement: function (element) {
UIkit.modal(element).toggle(); UIkit.modal(element).toggle();
}, },
}, },
@ -198,5 +198,5 @@ Vue.mixin({
new Vue({ new Vue({
store, store,
render: h => h(App), render: (h) => h(App),
}).$mount("#app"); }).$mount("#app");

8
webapp/src/store.js
View file

@ -146,14 +146,14 @@ export default new Vuex.Store({
actions: {}, actions: {},
getters: { getters: {
baseUri: state => state.origin, baseUri: (state) => state.origin,
ready: state => state.available, ready: (state) => state.available,
}, },
plugins: [ plugins: [
store => { (store) => {
// Load initial state from localStorage // Load initial state from localStorage
LOCALSTORAGE_KEYS.forEach(key => { LOCALSTORAGE_KEYS.forEach((key) => {
console.log(key); console.log(key);
const saved = localStorage.getItem(key); const saved = localStorage.getItem(key);
if (saved !== null) { if (saved !== null) {

63
webapp/src/wot-client.js
View file

@ -28,12 +28,7 @@ export const wotStoreModule = {
// Deduplication should be done elsewhere. // Deduplication should be done elsewhere.
let response = await axios.get(uri); let response = await axios.get(uri);
let td = response.data; let td = response.data;
let thing_name = let thing_name = name | uri.replace(/\/$/, "").split("/").pop();
name |
uri
.replace(/\/$/, "")
.split("/")
.pop();
commit("addThingDescription", { commit("addThingDescription", {
thingName: thing_name, thingName: thing_name,
thingDescription: td, thingDescription: td,
@ -53,38 +48,40 @@ export const wotStoreModule = {
}, },
}, },
getters: { getters: {
thingDescriptions: state => { thingDescriptions: (state) => {
return state.thingDescriptions; return state.thingDescriptions;
}, },
thingDescription: state => thingName => { thingDescription: (state) => (thingName) => {
return state.thingDescriptions[thingName]; return state.thingDescriptions[thingName];
}, },
thingAvailable: state => thingName => { thingAvailable: (state) => (thingName) => {
return thingName in state.thingDescriptions; return thingName in state.thingDescriptions;
}, },
thingFormUrl: state => (thing, affordanceType, affordance, op, allowUndefined = true) => { thingFormUrl:
// Find the URL for a particular operation (state) =>
let td = state.thingDescriptions[thing]; (thing, affordanceType, affordance, op, allowUndefined = true) => {
if (!td) { // Find the URL for a particular operation
if (allowUndefined) return undefined; let td = state.thingDescriptions[thing];
throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`; if (!td) {
} if (allowUndefined) return undefined;
let affordances = td[affordanceType]; throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
let href = findFormHref(affordances[affordance], op); }
if (href == undefined) { let affordances = td[affordanceType];
if (allowUndefined) return undefined; let href = findFormHref(affordances[affordance], op);
throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`; if (href == undefined) {
} if (allowUndefined) return undefined;
// If we've found an href, prepend the `base` URL if appropriate throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
if (href.startsWith("http")) return href; }
if ("base" in td) { // If we've found an href, prepend the `base` URL if appropriate
let base = td.base; if (href.startsWith("http")) return href;
if (href.startsWith("/")) href = href.slice(1); if ("base" in td) {
if (!base.endsWith("/")) base += "/"; let base = td.base;
return base + href; if (href.startsWith("/")) href = href.slice(1);
} if (!base.endsWith("/")) base += "/";
return href; return base + href;
}, }
return href;
},
thingPropertyUrl: (_state, getters) => (thing, property, op, allowUndefined) => { thingPropertyUrl: (_state, getters) => (thing, property, op, allowUndefined) => {
// Find the URL for a particular property // Find the URL for a particular property
return getters.thingFormUrl(thing, "properties", property, op, allowUndefined); 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 // Find the form in the affordance that matches the given operation type
if (affordance == undefined) return undefined; if (affordance == undefined) return undefined;
let forms = affordance.forms; 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; if (matchingForm == undefined) return undefined;
return matchingForm.href; return matchingForm.href;
} }