Best way to achieve a custom iViewer UI

I need to provide a custom data entry user interface inside an Omero deployment. This UI needs to allow pathologists to view and navigate an image viewer interface and also fill in a custom form with analysis data pertaining to that image.

After having a poke around, I’m convinced that the iViewer implementation is the best viewer so I want to use that.

I am planning to

I have already done some PoC work and it seems like customising the iViewer code is not too difficult although I’m not terribly familiar with Aurelia (prever vue.js).

so my questions…

Is there an easier way to achieve what I need e.g. is the iViewer ‘pluggable’ in some way?
Is there some big blocker to this approach that I haven’t seen yet (it won’t work because…)?

Thanks for any response
Michael Dausmann

Re: this quote…

… um yeah, not so easy. The codebase is … interesting :slight_smile:

Seriously, could use some help with this if anybody is awake.

Hi Michael,

No, I’m afraid that the iviewer is not ‘pluggable’.

Could you give us some more details of the kind of UI and interactions you wish to create?
Is it as simple as “show a form alongside the iviewer”, which might be achieved with an iframe, or do you need to respond to ROI selection, ROI editing, zoom/pan events etc?

If the code could live in a separate repo, instead of being added into a fork of iviewer, that would make future maintenance of the code much easier.



1 Like

Hi @Michael_Dausmann,
You’re in good hands with @will-moore for integrating such a form in iviewer. One other approach that may serve your needs is Douglas Russell’s excellent OMERO.forms plugin (see: GitHub - sorgerlab/OMERO.forms: Extension to OMERO.web to enhance metadata input and provide provenance). While not integrated with the viewer, it may provide a useful alternative.

1 Like

Thanks for responding Will,

I did try an iframe solution with my own custom plugin pulling in the iViewer into an iFrame, this appeared to work, until you interacted with the menu in the iViewer interface (inside the iframe) , then it all got a bit fractal and disassociated… can the iViewer be embedded with no menu?

If I was going to embed an iFrame into the iViewer, I would still be customising the iViewer right?

These are roughly my requirements in addition to what iViewer provides…

  • Form for entry of analysis results by pathologists.
  • Pathologists need to see the file they are annotating while they are entering data (to prevent mixups…they are very set on this).
  • Results need to persist against the fileset, not the image (i.e. the recorded analysis is for the slide rather than individual images taken from that slide).
  • Seperate results entry for each user.

Since my last post, I have actually made some progress and have attached a redacted image of my prototype running locally. The prototype fulfils all of the above requirements including persistence of the results as fileset annotations so I’m pretty much set on using this approach.

I still want to limit thumbnails to only other images in the fileset so that is my next challenge.

Any feedback or red flags/gotchas would be appreciated.

Hi Michael,
So it looks like you’re doing pretty well with Aurelia and the iviewer code, which is great.
As I mentioned above, the main concern with this approach is the maintenance burden with new releases of iviewer. If you have any ideas about how iviewer could be made to support your use-case as a plugin, that would be very nice to add some suitable plugin hooks to iviewer that would allow your code to live separately. We’ve taken this approach with the webclient right panels, but not thought about how we might do it with iviewer yet.

To only view thumbnails from the same fileset as the image that was opened in iviewer, I think the first step is to know what images are in that fileset, which iviewer doesn’t currently load.
Probably the easiest way to load this info is by adding it to the JSON from /iviewer/image_data/ID that is loaded for the image. This saves adding another AJAX call and it’s an endpoint that is already controlled by iviewer.

If you add to def image_data() at omero-iviewer/ at e8dd3e0d3ecf646eaac0ccf2d06376857d9bca59 · ome/omero-iviewer · GitHub something like this:

        fileset = image.getFileset()
        rv['fileset'] = {'id':, 'images': []}
        for i in fileset.copyImages():
            rv['fileset']['images'].append({'id':, 'name':})

Actually, I went ahead and tried this, along with setting the thumbnails by fileset ID in a branch at Comparing ome:master...will-moore:filter_thumbs_by_fileset · ome/omero-iviewer · GitHub

It seems to work but I’ve done limited testing. Hope that helps.


1 Like

ah, fantastic. I got this working by creating a new endpoint for fileset_images and changing the url in requestMoreThumbnails but I think adding the fileset stuff to the image info is better. Thanks Will.

I’m now working on building a docker image that includes my customised iviewer plugin. We have very strong python/docker skills in my team but if I get stuck, will reach out.

Thanks again.