Javascript - Open source web based visualization platform

[Paul Villoutreix]

Hi All,

I am working on an open source web based platform to visualize complex experimental datasets of embryogenesis in an easy and beautiful way.

This is part of a collaboration between the Center for Data Arts at the New School and Princeton University, and it is supported by the Mozilla Science Lab. There is a first prototype of the project here https://paulvill.github.io/ and the github repository is there https://github.com/paulvill/paulvill.github.io.

I think that OMERO would be the perfect tool to organize the database, in terms of data upload, data storage and permission setting, and OME-TIFF is most likely the best microscopy image data format.

However, I am new to it and I am not sure yet if it communicates well with a javascript based visualization interface. Do you know if there are similar projects? Any feedbacks are welcome!

Thank you very much,

Paul Villoutreix

[wmoore]

Hi Paul,

We have several Javascript based image viewers that display images in OMERO.

They all work by getting a rendered RGB image from OMERO. OMERO doesn't actually store or transmit data as OME-TIFF.
OMERO reads the pixel data from a single plane of the original image file using Bio-Formats to support a lot of different formats: https://www.openmicroscopy.org/site/sup ... rmats.html
The raw pixel data (e.g. 16bit data) is rendered to an 8-bit RGB image which is displayed by the web viewer.

You can see an example at http://idr-demo.openmicroscopy.org/webc ... l/2858253/
(showing an image from the public IDR http://idr-demo.openmicroscopy.org/webc ... ge-2858253)

Docs for the web framework are at https://www.openmicroscopy.org/site/sup ... s/Web.html

Hope that helps,

Regards,

Will.

[Paul Villoutreix]

Hi Will,

Thank you very much for you answer!

If I understand well, OMERO generates an URL that enables accessing the image and embedding it in the webpage.

I will do some tries using the references you sent me.

Best regards,

Paul

[wmoore]

Hi Paul,

You can use a url to get each rendered plane in a multi-Z/T image.

E.g. for the image at http://idr-demo.openmicroscopy.org/webg ... l/2858253/, plane at Z=10, T=0 is
http://idr-demo.openmicroscopy.org/webg ... :40$FF0000

The query string encodes the rendering settings for the 2 channels in this image (but you could have many channels).
More details on this are at https://www.openmicroscopy.org/site/sup ... teway.html

You'll also need to get the image data so you know the image dimensions, channels, rendering settings etc.
E.g. http://idr-demo.openmicroscopy.org/webg ... a/2858253/

Good luck!

Will.

[Paul Villoutreix]

Hi Will,

Thank you! The WebGateway seems well suited for accessing data on the OMERO server in my application.

It induces some cross origin issues when importing images with JavaScript using the Threejs library, but I think that I will be able to overcome them.

See CORS: https://developer.mozilla.org/en-US/doc ... ntrol_CORS

Best wishes,

Paul

[atarkowska]

Hi,

Some of OMERO.web views are decorated with JSONP so you don't need to worry about CORS, see the example doc of how to embed image viewer into your website https://www.openmicroscopy.org/site/sup ... wPort.html and JSfiddle https://jsfiddle.net/aleksandratarkowska/25hyc85x/. Although that is only limited to the following read-only urls http://downloads.openmicroscopy.org/ome ... teway.urls

If you are planning to list the data like it is exposed in OMERO.webclient you have to enable CORS Headers, for example like https://github.com/crs4/ome_seadragon/wiki/Enable-Django-CORS-(Cross-Origin-Resource-Sharing)-Headers-configuration.

Hope that helps

Ola