From 61c49e520f578457fc0465485f95ea0d751a16c1 Mon Sep 17 00:00:00 2001 From: oeway Date: Sun, 14 Feb 2021 17:40:39 +0100 Subject: [PATCH] Support ImageJ.JS --- .../api/static/src/components/appContent.vue | 9 +- .../galleryComponents/captureCard.vue | 25 ++- .../tabContentComponents/imjoyContent.vue | 188 +++++++++++++----- 3 files changed, 158 insertions(+), 64 deletions(-) diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue index 95295599..538bb6d8 100644 --- a/openflexure_microscope/api/static/src/components/appContent.vue +++ b/openflexure_microscope/api/static/src/components/appContent.vue @@ -55,7 +55,10 @@ :current-tab="currentTab" @set-tab="setTab" > - +
@@ -153,7 +156,7 @@ import galleryContent from "./tabContentComponents/galleryContent.vue"; import extensionContent from "./tabContentComponents/extensionContent.vue"; import aboutContent from "./tabContentComponents/aboutContent.vue"; import loggingContent from "./tabContentComponents/loggingContent.vue"; -import ImJoyContent from "./tabContentComponents/imjoyContent.vue" +import ImJoyContent from "./tabContentComponents/imjoyContent.vue"; // Import modal components for device initialisation import calibrationModal from "./modalComponents/calibrationModal.vue"; @@ -177,7 +180,7 @@ export default { aboutContent, loggingContent, TabIcon, - ImJoyContent, + ImJoyContent }, data: function() { return { diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue index e7ce0bd1..1f349676 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue @@ -41,16 +41,25 @@ > More... -
+ +
+ +
+  
- + +
@@ -28,9 +48,9 @@ v-for="w in windows" v-show="w === activeWindow" :key="w.id" - class="uk-card uk-card-body imjoy-container-card" + style="height: 100%;" > -

{{ w.name }}

+

{{ w.name }}

@@ -52,7 +72,8 @@ export default { windows: {}, loading: false, loadedPlugins: {}, - activeWindow: null + activeWindow: null, + viewers: {} }; }, mounted() { @@ -61,16 +82,76 @@ export default { //imjoy config }); - imjoy.start({ workspace: "default" }).then(async () => { + imjoy.start({ workspace: "default" }).then(() => { console.log("ImJoy started"); - imjoy.event_bus.on("add_window", async w => { + imjoy.event_bus.on("add_window", w => { this.addWindow(w); }); - await this.loadPlugin("https://kaibu.org/#/app"); + this.setupViewers(); }); this.imjoy = imjoy; }, methods: { + closeActiveWindow() { + if (this.activeWindow) { + this.activeWindow.api.close(); + this.activeWindow = null; + } + }, + selectWindow(name) { + for (let w of Object.values(this.windows)) { + if (w.name === name) { + this.activeWindow = w; + break; + } + } + }, + async setupViewers() { + this.loading = true; + // TODO: improve this using the ImJoy `api.getServices` + // See here: https://imjoy.io/docs/#/api?id=apigetservices + // The idea is that plugins can register custom services via `api.registerService` + // For example, we can have a image visualization service + // Then other plugins can use `api.getServices` to get a list of services + // And this can be used for render our "Open In ImJoy" menu + try { + const self = this; + this.viewers.kaibu = await this.imjoy.pm.createWindow(null, { + name: "Kaibu", + src: "https://kaibu.org/#/app" + }); + this.$store.commit("addOpenInImjoyMenuItem", { + title: "Kaibu", + async callback(name, imageUrl) { + self.selectWindow("Kaibu"); + const viewer = self.viewers.kaibu; + viewer.set_mode("full"); + await viewer.view_image(imageUrl, { type: "2d-image", name }); + await viewer.add_shapes([]); + } + }); + this.viewers.imagej = await this.imjoy.pm.createWindow(null, { + name: "ImageJ.JS", + src: "https://ij.imjoy.io" + }); + this.$store.commit("addOpenInImjoyMenuItem", { + title: "ImageJ.JS", + async callback(name, imageUrl) { + self.selectWindow("ImageJ.JS"); + const viewer = self.viewers.imagej; + const response = await fetch(imageUrl); + const buffer = await response.arrayBuffer(); + await viewer.viewImage(buffer, { + name: name.replace(".jpeg", ".jpg") + }); + } + }); + } catch (e) { + alert(`Failed to setup viewers, error: ${e}`); + } finally { + this.loading = false; + } + }, addWindow(w) { this.windows = this.windows || {}; this.windows[w.window_id] = w; @@ -78,54 +159,33 @@ export default { this.$forceUpdate(); }, loadPlugin(uri) { - this.loading = true; - this.imjoy.pm - .reloadPluginRecursively({ - uri - }) - .then(async plugin => { - this.loadedPlugins[plugin.name] = plugin; - this.registerOpenInImJoy(plugin); - this.loading = false; - }) - .catch(e => { - console.error(e); - this.loading = false; - alert(`failed to load the plugin, error: ${e}`); - }); - }, - registerOpenInImJoy(plugin) { - let item; - // TODO: improve this using the ImJoy `api.getServices` - // See here: https://imjoy.io/docs/#/api?id=apigetservices - // The idea is that plugins can register custom services via `api.registerService` - // For example, we can have a image visualization service - // Then other plugins can use `api.getServices` to get a list of services - // And this can be used for render our "Open In ImJoy" menu - if (plugin.name === "Kaibu") { - item = { - title: "Kaibu", - async callback(name, imageUrl) { - const viewer = await plugin.api.run(); - viewer.set_mode('full'); - await viewer.view_image(imageUrl, {type: '2d-image', name}); - } - }; - } else if (plugin.name === "ImageJ.JS") { - item = { - title: "ImageJ.JS", - async callback(name, imageUrl) { // eslint-disable-line - alert("not implemented"); - } - }; - } - if (item) this.$store.commit("addOpenInImjoyMenuItem", item); + return new Promise((resolve, reject) => { + this.loading = true; + this.imjoy.pm + .reloadPluginRecursively({ + uri + }) + .then(async plugin => { + this.loadedPlugins[plugin.name] = plugin; + this.loading = false; + resolve(plugin); + }) + .catch(e => { + console.error(e); + this.loading = false; + reject(e); + alert(`failed to load the plugin, error: ${e}`); + }); + }); }, async runPlugin(plugin) { await plugin.api.run(); }, loadPluginDialog() { - const uri = prompt("Paste the ImJoy plugin url here"); + const uri = prompt( + "Paste the ImJoy plugin url here", + "imjoy-team/imjoy-plugins:Welcome" + ); if (uri) { this.loadPlugin(uri); } @@ -143,4 +203,26 @@ export default { width: 100%; height: 100%; } + +.window-title { + height: 26px; + text-align: center; + font-size: 1.2rem; + background-color: #efefef; + color: #482727; + font-weight: 500; +} + +.plugins-button { + position: absolute; + right: 1px; + height: 26px; + line-height: 11px; +} + +.close-button { + position: absolute; + right: 100px; + height: 26px; +}