Announcing ImageJ.JS: ImageJ running in the browser!

Hi all, I am happy to announce ImageJ.JS (https://ij.imjoy.io): ImageJ compiled into Javascript and integrated with ImJoy, please check this twitter thread for more details:

and follow our official twitter account @ImJoyTeam!

Happy to hear what you think about it and join us to make it better!

21 Likes

This is awesome! :tada:

3 Likes

Hi @oeway,

This is amazing! It’s great to see ImageJ running in browsers again, as it did for many years as a Java applet.

Could you make the JavaScript code available? I would love to see what it looks like. I tried to use CheerpJ (https://www.leaningtech.com/pages/cheerpj.html) to convert ij.jar into JavaScript, but it requires Python 3, which I don’t have on my Mac, and there does not appear to be an easy way to install it.

5 Likes

You should be able find everything in the two github repo: the js part ImageJ.JS and the java part ImageJA.JS. I wrote some rough guidelines here.

If you don’t want to compile anything locally, you can download the compiled js+html+css+jar+jar.js files-- everything you need to run ImageJ.JS locally as a zip with this link. Unzip it and serve it locally with Python:

# If you have python3
python3 -m http.server

# On windows try "python" instead of "python3", or "py -3"

# If you only have python2
python -m SimpleHTTPServer

Then go to http://127.0.0.1:8000 and you should get your local imagej.js.

Worth mentioning, if you fork the two repos, and the Github Actions CI will automatically download cheerpj, compile it and deploy.

5 Likes

Hi @oeway,

I’m continuing testing and being amazed by the open possibilities!

Let’s say we have a course with some macros in a github repo, what would be your recommendation to use ImageJ.JS:

  • rely on your instance
  • install our own version and handle it ourselves

Do you plan to have more pre-installed plugins? Like Bio-formats for example?

Thank you again for settings up this awesome tool!

Cheers,

R

4 Likes

Hi Romain,

Thanks and I am glad that you liked it!

Thanks for bringing this up, and please allow me to expand a bit to the topic first and provide my suggestion.

I think the long-term goal of ImageJ.JS is to provide Fiji-in-the-browser to be backed by a plugin server (use Github releases or potentially reusing the Fiji update site).

To get rid of “thousands” of menu items in Fiji, it will be cool to also support custom reproducible environment like MyBinder, i.e., treat browser as a docker-like environment (not completely true but more or less) and load configuration files from user’s github repo to build a customized ImageJ environment. When the user click a link point to that environment config file, all the preconfigured plugins are downloaded to the browser file system automatically. This will be ideally suited for publications and teaching purpose.

However, there are some limitations with the current cheerpj compiler runtime which prevent us from support these already: 1) we need to be able to load plugin files from user’s browser database (IndexedDB) and local file system, but it is not supported right now 2) we need to be able to patch jar files during compilation time or runtime to make sure the plugin files are compatible with the browser environment (typically the file handling part). Without this, we will need to dig into each plugin and change from their source directly, and this can be done for a few important plugins (e.g. bioformats), but not sustainable for managing many plugins. In addition, 3) we want to support progressive reading of large files (e.g. > 4GB) directly from the disk

We are discussing with the company who made the compiler to add these features and they made a rough estimation of a few weeks of work, so we are now try to secure some funding for the development. You may also wondering why we choose to use a closed source compiler, the short answer is there is no comparable open source alternative yet, but there can be soon in the future, potentially powered by WebAssembly. Also see a message here in the imagej gitter.

For now, my suggestion is to use the ij.imjoy.io version if it contains everything you need, since we will continuously working on new features and bug fixes. You don’t need to worry about the number of visitors to the website because they are just static files hosted on CDNs and Github, the site is scalable to a large number of users.

If you want to make changes (e.g. install a new plugin), feel free to fork the project and mess it around, use it for your own purpose or ideally send a PR to the official repo if you think it will be useful for larger audience. I am happy to help if you have any issue.

To include preinstalled plugin, please take a look here if you are interested in compiling yourself: https://github.com/imjoy-team/imagej.js#development

Otherwise, submit an issue: https://github.com/imjoy-team/imagej.js#install-new-imagej-plugins

To clarify, not every plugin will work directly after compilation, we only support imagej-1 plugin for now and not all of them can work out of the box. For Bioformats, I think it’s quite useful to have it, but because the size is huge, we might need to wait until we support loading plugin from browser database so we don’t need to download it everytime, and there might be other issues related to file handling. I will look into bioformats and keep you updated.

These is just what I am thinking, please feel free to contribute ideas!

5 Likes

Hi Wei Ouyang

I’m currently working on a project that aims to bring Fiji to a website just like what you did with imagej.
Once we saw your project we inmediately saw how brilliant it was and how it can be used to bring imagej to the web.

I’ve been following the documentation to add plugins locally but I don’t seem to get it working just yet.
Do you have any documents on how to include local plugins to a local version of image.js?

Thanks in advance

Hi Giovanni,

Thanks for your interest in ImageJ.JS. Have you tried GitHub - imjoy-team/imagej.js: ImageJS--Image analysis in the browser with ImageJ we have an example for compiling MorphoLibJ. However, you need to be aware that we only support ImageJ-1 plugins and not all of them will work out-of-the-box, some may require some change in the plugin. If possible it might help if you provide the name of the plugin or even submit an issue to our github repo so we can have more dedicated discussion.

Hi

Thanks for the reply

Yes I have and I don’t seem to get it working just right, im trying to add the ObjectCounter3D and after I add it to the dist folder and try to see it it doesn’t appear there.
I’ll send you some screenshots of my process in a second email.

Giovanni

Here’s my process

By using the ObjectCounter3D.jar and transform it with ${CHEERPJ_DIR}/cheerpjfy.py --deps=ij.jar plugins/Object_Counter3D.jar

I copied the files to the dist folder inside imagej.js

Is the last step on which I’m not so sure about.

Any help with be appreciated.

Giovanni

Hi Giovanni,

Sorry for the confusion, I just rewrite the part about compiling a plugin, please take a look at here: GitHub - imjoy-team/imagej.js: ImageJS--Image analysis in the browser with ImageJ and let me know if it works for you.

Good luck.

I appreciate the help on the plugin update.

I will try to add some plugins of our own.

I’ll let you know if I succeed.

Thanks

Giovanni

I’ve been following the new guidelines.

For the plugins that I’ve tried I don’t seem to get the “Plugins.config” file after the command:

  • ${CHEERPJ_DIR}/cheerpjfy.py --deps=ij.jar plugins/MorphoLibJ_-1.4.2.1.jar
  • extract plugins.config

I have tried with the Object_Counter3D plugin in the .jar file.

https://imagej.nih.gov/ij/plugins/track/objects.html

Am I following the steps properly?

Is this plugin compatible with the current version of ImJoy?

Thanks


Hi Giovanni, you will only get the plugin config file after running jar xf plugins/MorphoLibJ_-1.4.2.1.jar plugins.config, this command simply extract the plugins.config file inside the jar file. Please try it and see if it works.

Otherwise, you can safely ignore the plugins.config file as that is not mandatory to get the plugin to work (only used to speedup the loading).

Oh, for the Object_Counter3D plugin, it seems it only produce a class file which doesn’t work with cheerpj, you will need to wrap the class file or compile the .java plugin and make a proper .jar file, then it should work with the steps I provided.

Regarding. how to do that exactly, I am not the best person to answer this in details, but I am sure you can get help from others on how to make a plugin jar file from the java file.

I got it working, thanks a lot for the help :slight_smile:

@Giovanni That’s great! You are welcome.

This plugin might be useful for others as well, would you like to contribute it to the https://ij.imjoy.io ? Basically, write some script to download, compile the plugin, just like this: ImageJA.JS/compile-js.sh at d76a210ec86dfb36e13a64093a7c9b34fad85ad3 · imjoy-team/ImageJA.JS · GitHub then send a PR to the ImageJA.JS repo.

Yes I would like to do that.

There are some tests I still need to run to make sure that the plugin is stable and that it behaves like it’s non .js counterpart.
As soon as those are ready, I’ll be happy to contribute.

Giovanni

Hello @oeway,
we are facing some problems with integrating ImageJ in our React application. We followed your guidline to install ImageJ and then ran it on our browser. We tried to use the ImageJ on a specific site in our React App. We wanted to display the running ImageJ.js on our site using Iframe.
MicrosoftTeams-image_2
Everything works fine except the editingtool-buttons shown in the picture (you are not able to click on them).
Do you know how to solve this problem or do you have any other approach to integrate Image.js into our React project.

We really appreciate your work and would be happy for a soon answer.

Hi @erik57 Thanks for your interest in using ImageJ.JS. I noticed the same issue and this has been fixed earlier today (see this PR). It has been deployed to https://ij.imjoy.io.

Just for curiosity, could you tell me a bit more about your React project? I guess you are using url query to control ImageJ.JS? FWIW, if load imjoy-core to your React app, you can call the API functions exposed by ImageJ.JS.

Hello @oeway,
thank you very much, everything works fine now. We want to use ImageJ.JS as a editing tool to preprocess medical images, which will be then analyzed via machine learning in the backend.
Here is our project: AIxCell - Medizin- und Pflegetechnik ,Künstl. Intelligenz, Deep Learning ,Sonstige Metathemen - Laufende Projekte | Forschung F.O.M..