<docs lang="markdown">
The panel for upload the image file.
</docs>
<config lang="json">
{
"name": "mi-panel",
"type": "window",
"tags": [],
"ui": "",
"version": "0.1.0",
"cover": "",
"description": "[TODO: describe this plugin with one sentence.]",
"icon": "extension",
"inputs": null,
"outputs": null,
"api_version": "0.1.8",
"env": "",
"permissions": [],
"requirements": [
"https://cdn.tailwindcss.com",
"https://cdn.jsdelivr.net/npm/imjoy-rpc@0.5.6/dist/hypha-rpc-websocket.min.js"
],
"dependencies": [
"https://gist.githubusercontent.com/Nanguage/27a003bec90ee8fdd29859cb446c608d/raw/7b3da1618ade6823288b2f1197c3ae6538add118/mi_core.imjoy.html"
]
}
</config>
<script lang="javascript">
class ImJoyPlugin {
async setup() {
console.log("setup")
this.core_plugin = await api.getPlugin('mi-core')
this.setupEvents()
}
setupEvents() {
const setInfoPanel = this.setInfoPanel.bind(this)
this.listenFileSelection(setInfoPanel)
this.listenURLInput(setInfoPanel)
this.listenSampleInputButton(setInfoPanel)
this.listenSampleOutputButton(setInfoPanel)
this.listenSubmitButton(setInfoPanel)
}
listenFileSelection(setInfoPanel) {
const fileInput = document.getElementById("file-input")
const fileChosen = document.getElementById('file-chosen');
const viewImageByBytes = this.viewImageByBytes.bind(this)
fileInput.addEventListener("input", async () => {
setInfoPanel("Loading file...")
const file = fileInput.files[0]
fileChosen.textContent = file.name
if (!file) {
await api.alert("No file selected")
setInfoPanel("")
return
}
const reader = new FileReader()
reader.onload = async function() {
const content = this.result
await viewImageByBytes(file.name, content)
// set to empty so that the same file can be loaded again
fileInput.value = ''
setInfoPanel("")
}
reader.readAsArrayBuffer(file)
})
}
listenURLInput(setInfoPanel) {
const viewImageByURL = this.viewImageByURL.bind(this)
const urlInput = document.getElementById("url-input")
const urlLoadButton = document.getElementById("url-load-button")
urlLoadButton.addEventListener("click", async () => {
const url = urlInput.value
if (!url) {
await api.alert("No URL provided")
return
}
setInfoPanel("Loading image...")
await viewImageByURL(url)
setInfoPanel("")
})
}
listenSampleInputButton(setInfoPanel) {
const sampleInputButton = document.getElementById("sample-input-button")
sampleInputButton.addEventListener("click", async () => {
const sampleInput = this.model_rdf.sample_inputs[0]
setInfoPanel("Loading sample input...")
await this.viewImageByURL(sampleInput)
setInfoPanel("")
})
}
listenSampleOutputButton(setInfoPanel) {
const sampleOutputButton = document.getElementById("sample-output-button")
sampleOutputButton.addEventListener("click", async () => {
const sampleOutput = this.model_rdf.sample_outputs[0]
showLoadingInfo()
setInfoPanel("Loading sample output...")
await this.viewImageByURL(sampleOutput)
setInfoPanel("")
})
}
listenSubmitButton(setInfoPanel) {
const submitButton = document.getElementById("submit-button")
const core = this.core_plugin
const self = this
const inputAxes = document.getElementById("input-axes-input")
submitButton.addEventListener("click", async () => {
const input_axes = inputAxes.value || null
console.log("Input axes:", input_axes)
setInfoPanel("Running model...")
const ret = await core.run_model(
self.model_id, self.model_rdf, input_axes
)
if (ret === false) {
setInfoPanel("Failed to run the model.")
} else {
await self.updateImageShapePanel()
await core.show_image_vtk()
setInfoPanel("")
}
})
}
async viewImageByBytes(fileName, bytes) {
console.log(bytes)
this.bytes_data = bytes
await this.core_plugin.load_image_from_bytes(fileName, bytes)
await this.updateImageShapePanel()
await this.core_plugin.show_image_vtk()
}
async viewImageByURL(url) {
await this.core_plugin.load_image_from_url(url)
await this.updateImageShapePanel()
await this.core_plugin.show_image_vtk()
}
set_default_url(sampleInput) {
const urlInput = document.getElementById("url-input")
urlInput.value = sampleInput
}
setInfoPanel(content) {
const info = document.getElementById("info-panel")
info.textContent = content
}
async updateImageShapePanel() {
const shape = await this.core_plugin.get_current_image_shape()
const imgShapePanel = document.getElementById("img-shape-panel")
imgShapePanel.textContent = `Current image shape: ${shape}`
}
async run(ctx) {
console.log("run", ctx)
const defaultModel = "10.5281/zenodo.5874741"
const model_id = ctx.data.id || defaultModel
this.model_id = model_id
// Load the model RDF
const rdf = await this.core_plugin.get_model_rdf(model_id)
console.log(rdf)
this.model_rdf = rdf
const sampleInput = rdf.sample_inputs[0]
this.set_default_url(sampleInput)
}
}
api.export(new ImJoyPlugin())
</script>
<window lang="html">
<div class="m-1">
<p class="mt-2">Load an PNG, JPG or TIFF file:</p>
<div class="flex">
<span id="file-chosen" class="w-1/2 px-4 py-2 border border-gray-300 rounded-l-md text-gray-500">No file selected.</span>
<label for="file-input" class="py-2 px-3 bg-blue-500 text-white rounded-r-md cursor-pointer w-20 text-center hover:bg-blue-600">
Browse
</label>
<input type="file" id="file-input" class="hidden" />
</div>
<p class="mt-2">Or load from an URL. The URL to OME-Zarr are supported:</p>
<div class="flex">
<input type="text" class="w-1/2 px-4 py-2 border border-gray-300 rounded-l-md text-gray-500"
placeholder="Target URL"
id="url-input" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded-r-md w-20 hover:bg-blue-600"
id="url-load-button">Load</button>
</div>
<p class="mt-2">Input axes (optional, for example yxzc):</p>
<input type="text" class="w-2/3 px-4 py-2 border border-gray-300 rounded-md text-gray-500"
placeholder="Input axes"
id="input-axes-input" />
<p class="mt-2 text-gray-500 text-sm" id="info-panel"></p>
<p class="mt-2 text-gray-500 text-sm" id="img-shape-panel"></p>
<div class="flex flex-row gap-4 mt-2">
<button
class="px-4 py-2 bg-blue-500 text-white rounded-md w-25 hover:bg-blue-600"
id="submit-button">Submit</button>
<button
class="px-4 py-2 bg-cyan-300 text-white rounded-md w-30 hover:bg-cyan-400"
id="sample-input-button">Sample input</button>
<button
class="px-4 py-2 bg-cyan-300 text-white rounded-md w-30 hover:bg-cyan-400"
id="sample-output-button">Sample output</button>
</div>
</div>
</window>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.