Fork me on GitHub
Try the DEMO!

OMERO.figure

OMERO.figure blog

Release: 3.1.1

03 Jul 2017

We are pleased to announce the release of OMERO.figure 3.1.1. This is a bug fixing release

Bug fixes include:

Release: 3.1.0

28 Jun 2017

We are pleased to announce the release of OMERO.figure 3.1.0.

NB: If upgrading from before 3.0.0, please read the release notes for 3.0.0 about switching to installation via PyPI.

New features in OMERO.figure 3.1.0:

Bug fixes and cleanup include:

Release: 3.0.0

19 Apr 2017

We are pleased to announce the release of OMERO.figure 3.0.0. This release builds on the previously unannounced 2.0 release in which the installation of OMERO.figure was moved to PyPI. Previous installation of OMERO.figure should first be removed before installing from PyPI.

Installation is now much simpler. Principally the install is done via pip, with some additional configuration settings.

$ pip install omero-figure

For full details see our install and upgrade documentation.

The script used to export a figure as PDF or TIFF still requires to be uploaded to the OMERO.server. This is not available via pip

This change means that OMERO.figure now requires OMERO 5.3.0.

Additional features new in OMERO.figure 3.0.0

Load ROIs from OMERO to add new Shapes to your figure (PR #190):

Set the position and size of figure panels:

Look-up table support (PR #160):

OMERO.figure supports the new ‘open-with’ functionality.

Other features:

Release: 1.2.1

20 Apr 2016

We are pleased to announce the release of OMERO.figure 1.2.1. This is a minor release that contains a small number of bug fixes and minor feature improvements.

Features:

Bug Fixes:

Grab the release from the OMERO.figure 1.2.1 download page.

Release: 1.2.0

24 Nov 2015

We are pleased to announce the release of OMERO.figure 1.2.0. This release introduces support for illustrative ROIs on figure panels.

NB: ROIs drawn in OMERO.figure cannot yet be saved as new ROIs on the OMERO server and it is not yet possible to load ROIs from OMERO to use in OMERO.figure.

Key features

Many of the new ROI features and workflows are described in the previous blog post and a full demonstration of these new features can be viewed below:

Known Issues

Grab the release from the OMERO.figure 1.2.0 download page.

Try new ROI features on the demo app

09 Nov 2015

As you may have heard, we are currently adding ROI support to OMERO.figure, allowing you to draw ROIs on image panels and copy & paste these between images. This post describes the new features and invites you to try them out on the demo app and provide feedback ahead of their inclusion in the next release. NB: It should be noted that ROIs created in OMERO.figure are saved within the figure itself in the same way as labels & scalebars. They can’t yet be saved back to the OMERO server, although we may add this functionality in due course.

Adding, editing and deleting ROIs on image panels

To add ROIs to panels in the figure, select a single panel, click on the Labels tab and then click on the Draw button under the ROIs header. This will launch the ROI viewer, where you can draw, edit and delete a number of ROI types; currently we support rectangles, lines, arrows and ellipses.

Drawing and editing of ROIs should “just work” as you expect it to: select the type of ROI in the toolbar, as well as the line width and colour. Then draw the ROI on the image. You can also use the select arrow to select and edit existing ROIs.

Selected ROIs can be copied, pasted and deleted using the Edit menu options or keyboard shortcuts. Copying and pasting can be used to duplicate ROIs on a single image, but also to transfer ROIs from one image panel to another. Click OK at the bottom of the viewer to save changes to ROIs and close the viewer.

Copy, paste & edit ROIs without opening the viewer

In the Labels tab, you can copy, paste and delete all the ROIs on the selected image panels using the relevant buttons, without having to open the ROI viewer.

You can also bulk edit the ROIs on selected images, changing the line width or colour of all ROIs at once. This allows you to see the effects of these changes on the whole figure as you are editing.

Enhanced cropping features

OMERO.figure allows you to crop an image panel by zooming and panning or by using the Crop button. You can now copy and paste the crop region from one image to another, using the buttons at the bottom of the Preview tab.

The pop-up crop dialog has also been improved to allow you to crop an image based on various regions. If the image in the figure has any rectangular ROIs on it then you can pick one of these as a crop region. You can also use a region that you have copied to the clipboard: either a crop region from another image or a rectangle ROI that has been copied to clipboard as described above. This makes it easy to crop an image to a chosen ROI that is also displayed on another image in the figure.

Copy and paste ROIs to regions and vice versa

As described above, you can copy ROIs from the ROI viewer or via the ROI Copy button in the Labels tab. If you copy a rectangle from one panel, you can paste this as a crop region on another panel, using the Paste button on the Preview tab.

Conversely, you can also copy a crop region from one panel and paste this to create a new rectangle ROI on another panel.

Try the ROI features on the demo app, before their release

The ROI functionality described here will be in the next release of OMERO.figure 1.2.0. However, if you’d like to try this now you can use the demo app at http://figure.openmicroscopy.org/demo/.

If you have any comments or suggestions, it would be great to hear from you. This gives us a chance to fix issues before the release.

Many thanks!

OMERO.figure demo app: How it works and how to use it

12 Oct 2015

If you want to try using OMERO.figure without installing the app or the OMERO server, you can simply visit the demo site at figure.openmicroscopy.org/demo/

So how does the demo work, and what OMERO server does it use?

OMERO.figure overview

OMERO.figure is basically a bunch of html and javascript that runs in your browser, getting data and images from an OMERO server.

It can also use the OMERO server to save the figure file and export the figure as PDF or TIFF files.

OMERO.figure reads image data from OMERO, and can save figure files and PDFs

However, OMERO.figure doesn’t have to get data from its own “host” OMERO server. It can get data from any OMERO server that is available to you on the internet (either you are logged in or the OMERO server is a public repository).

The demo app reads image data from the OMERO-based JCB DataViewer

The demo app doesn’t have its own OMERO server. The html and javascript simply come from the figure.openmicroscopy web site. The demo app instead gets its OMERO images and metadata from the JCB DataViewer, which is a public image repository built with OMERO.

The JCB DataViewer provides public image data and image rendering, but doesn’t support saving of figure files or export of figures to PDF / TIFF.

Using OMERO.figure demo app

The demo app works in exactly the same way as the regular OMERO.figure app, with a couple of differences:

Adding images from JCB DataViewer to OMERO.figure demo app

In fact, it’s not just the demo app that can add images from publicly available OMERO servers. The regular OMERO.figure also has this feature (in case you want to do that).

Enjoy using the demo app. And watch this space for new ROI features soon, ahead of their release in OMERO.figure 1.2.0.

Status update: Summer 2015

03 Aug 2015

Since the 1.1.1 release in May, a couple of developments in the OMERO.figure project are worth mentioning:

Figure moved to OME

As you may have noticed, the ‘figure’ repository has changed ownership from me (Will) to the OME team at https://github.com/ome/omero-figure.

This makes it easier for us to include the app in our automated deployment and testing workflows and is recognition that development and testing of OMERO.figure is now a team effort.

From now on, individual Pull Requests will be deployed, reviewed, tested and any issues addressed before being merged, in the same way as on all the other OME projects.

The same process applies to the OMERO.figure website (including this blog post) and the site has a new, improved url: figure.openmicroscopy.org, which you are looking at right now.

ROI support

My major focus on OMERO.figure this summer (apart from having some time off) has been working on the much-requested support of ROIs.

I began by developing the tools for drawing and editing simple shapes on an image. Lines, Arrows, Rectangles and Ellipses will cover many users’ needs, with others to come later. Surprisingly, I haven’t found an existing library for this but rolling my own has the advantage of building just what I want. I’ve been using ImageJ as a guide for ROI functionality (E.g. for the way that ellipses are created) since this is clearly well aligned to what users want.

However, during this time it became clear that this functionality would be useful on other apps, such as the main OMERO webclient, which still lacks the ability to edit ROIs. So I then started porting this code to a standalone toolkit that doesn’t rely on the Backbone.js library on which OMERO.figure is built. This is not quite finished, but you can try the demo here.

Once this is ready, I will move back to OMERO.figure development. Initially the focus will be a dialog box that shows a ‘full image viewer’ with the ability to draw and edit simple shapes that are then displayed in the figure. A crucial part of this functionality will be the ability to add shapes to exported figures, both in the PDF and TIFF formats. Ideally ROIs will be kept as atomic entities in the PDF figures, allowing them to be individually edited in vector-based tools such as Adobe Illustrator. However, this may be a little challenging, so we’ll have to see.

This core functionality will be enough to justify a major release. Following minor releases will add the ability to copy and paste ROIs between image panels and read & write ROIs from OMERO. The schedule will depend on how long it takes to get the basic workflow complete, and the time available during the main OMERO 5.1.4 and 5.2 releases. Hopefully we’ll have something out about the same time as OMERO 5.1.4, due in September. Thanks for your patience!

Release: 1.1.1

05 May 2015

I am pleased to announce release of OMERO.figure 1.1.1 which is a point release that contains a small number of bug fixes and minor feature improvements.

Bug Fixes:

Other Changes:

Grab the release from the OMERO.figure 1.1.1 download page.

Quality figures from OMERO.figure

30 Apr 2015

I recently read an excellent guide by Benjamin Names on How to Create Publication-Quality Figures.

It describes the goals of scientific figure creation (accuracy, quality, transparency) and a very thorough workflow to achieve these goals. The key is to understand your data and how it is stored, manipulated and displayed. In particular, it is important to minimise the number of steps where data is transformed and perform lossy steps as late as possible in the figure creation process.

Benjamin documents specific tools that he uses for his workflow such as ImageJ for images and Inkscape for figure layout. But much of his workflow can also be applied to OMERO.figure since it was designed with the same principals in mind.

I highly recommend you read the guide above, as it provides a lot of background information on how computers handle vector and raster data. The steps of Benjamin’s guide that can be replicated in OMERO.figure are described below.

Preparing figure components (High-bit-depth images)

The OMERO server stores your original microscope files and can render them as 8-bit images using your chosen rendering settings. Single-color LUTs can be applied to each channel over a specified intensity range and channels can be toggled on and off. None of these changes will alter the original microscope data. OMERO.figure does not require you to save 8-bit images before creating a figure, since all rendering is done ‘live’ within the figure app itself after importing images, as described below.

Figure layout

OMERO.figure is similar to Inkscape and Adobe Illustrator in that it defines figures in a vector-based format that embeds linked images. This means that moving and resizing images within a figure does not require resampling of pixel data, avoiding loss of image quality.

Screenshot: Editing layout and rendering settings in OMERO.figure.
Try the demo</a>. Data from Wang et al JCB 3013.

Importing images

To add images to OMERO.figure, you simply specify the ID of the image in the OMERO server. The necessary data such as image size, number of channels, pixel bit-depth etc is then imported from the server. You can then edit the image rendering settings while working on the figure layout and these changes are stored in the OMERO.figure file. The file format is a Javascript object (saved as json data) and contains no pixel data. OMERO.figure retrieves rendered 8-bit images from the OMERO.server and assembles them into a figure in the browser as needed.

The resolution (dpi) of images in OMERO.figure is calculated from their size on the page and the printed size of the page itself (which can be edited under File > Paper Setup…). The dpi of each image can be seen under the ‘Info’ tab and will change as the image is resized and zoomed.

Journals usually require all images to be at 300 dpi or above in order to avoid a pixelated appearance when figures are displayed at their published size. If you need to increase the dpi for an image, you can set an export dpi and the panel will be resampled as necessary in the exported PDF.

Clipping masks

OMERO.figure allows you to crop images. It uses a ‘clipping mask’ to produce the cropping effect which means you can undo or edit the crop at any time. You can crop by using the zoom slider to zoom the image, then pan to the desired spot, or you can use a standard ‘crop’ tool to draw a crop region on an image.

Calculating scale bars

Scale bars can be easily added to images in OMERO.figure and the known pixel size will be used to calculate the correct length. Scale bars are vector objects overlaid on the image and will be automatically resized if you resize or zoom the image.

Exporting final figure files

OMERO.figure offers export in PDF and TIFF formats. Both are generated on the OMERO server using a Python script and the Python Imaging Library (PIL) for image manipulation. Figures are saved on the server and are then available to download.

Creating TIFF Images

Tiff images, at 300 dpi are generated by resampling all the embeded images using a bilinear filter. Vector data such as labels and scalebars is rasterized and overlaid on the image.

Creating PDF Files

The Python script uses the Reportlab library to produce PDF files. Images are rotated, cropped and resampled to the chosen dpi as necessary and saved as TIFFs before embedding in the PDF. Labels and scalebars remain as vector objects that can subseqently be manipulated in other vector-based packages if needed.

Export with images

An additional option with TIFF or PDF figure export is to export all the embedded images as TIFFs, saved at each stage of the figure generation process:

This option increases the transparency of the image processing steps, and also provides images that can be used for other purposes if needed.

Summary

OMERO.figure is a web application that stores figures in a vector-based file format linked to images. By linking to the original microscope images in the OMERO.server, we have complete control over rendering of high bit-depth images within the figure. Only when the figure is exported do we need to save images as 8-bit TIFFs. This pushes the lossy and file-format specific steps to the very end of the figure creation process, ensuring the highest possible quality of images in the final figure.

Thanks to Benjamin Names for his original guide which provided the basis of this article.

Release: 1.1.0

20 Apr 2015

I am pleased to announce release of OMERO.figure 1.1.0. This release adds a number of features to the editing and export of figures.

Watch a demonstration of these new features or read their description below:

Multiple page figures:

Crop to region or ROI:

Set dpi of panel images:

Export of figures as TIFFs:

Export of panel images alongside figure:

Figure legend:

Other features:

Bug fixes:

Grab the release from the OMERO.figure 1.1.0 download page.

Release: 1.0.1

02 Apr 2015

This release allows OMERO.figure to be used with the latest 5.1.0 OMERO release. This release adds no new features or other bug fixes to OMERO.figure.

However, a major release of OMERO.figure with several new features and bug fixes should be available in 2 or 3 weeks.

Customizing Bootstrap colorpicker

24 Feb 2015

When looking to add a color-picker to OMERO.figure as requested, I searched for “bootstrap colorpicker” since all the UI is currently built using the fantastic Twitter bootstrap framework. I quickly found bootstrap colorpicker which seemed to do everything I needed. The only problem was that the color-picker itself was smaller than I wanted, at only 100 pixels wide.

Before and After Customizing

The docs didn’t provide any clues on how to increase the size of the colorpicker, so I started to play with Chrome’s dev-tools and managed to add a couple of styles to double the size as follows:

<style />

  .colorpicker-hue {
      height: 200px;
      width: 30px;
      background-size: 30px 200px;
  }
  .colorpicker-saturation {
      width: 200px;
      height: 200px;
      background-size: 200px 200px;
  }
</style>
        

However, these changes alone broke the colorpicker, since it was still using the 100px size in the plugin. Fortunately a little inspection of the code revealed that these dimensions were configurable in the plugin’s ‘slider’ option.

By passing in a customised ‘slider’ option, the colorpicker works as normal at it’s new size:

<script>
$(function(){

    var sliders = {
        saturation: {
            maxLeft: 200,
            maxTop: 200,
            callLeft: 'setSaturation',
            callTop: 'setBrightness'
        },
        hue: {
            maxLeft: 0,
            maxTop: 200,
            callLeft: false,
            callTop: 'setHue'
        },
        alpha: {
            maxLeft: 0,
            maxTop: 200,
            callLeft: false,
            callTop: 'setAlpha'
        }
    };

    $('.demo').colorpicker({'sliders': sliders});
});
</script>

Preparing for OMERO.figure releases

20 Jan 2015

I don’t have a fixed release timetable for OMERO.figure, but I try to work on it when I can and release as soon as there’s enough features to justify it. Since I’ve recently added functionality for cropping panels to ROIs, multi-page figures, scalebar labels and resize by magnification, it’s time to start preparing for the next release, which I expect will be 1.1.

Release candidate build

We can build and deploy the current ‘develop’ branch to a testing server using a continuous integration job at ci.openmicroscopy.org to allow all team members to test the release candidate.

Testing scenarios

The OMERO project has an extensive series of testing scenarios that describe how each feature of the application can be manually tested. These have been extended with a comprehensive set of tests for OMERO.figure. Testing scenarios for the new features will need to be added to the suite and then the complete release testing can begin. This disciplined approach ensures that there are no gaps in the testing and allows the testing to be split up among multiple team members if needed.

Youtube videos

Preparing video demonstrations is a good way to document new features. Even though the youtube viewing figures for existing videos have been a little disappointing, I’m still going to continue the exercise for future releases because it helps me find bugs. When developing the application, you tend to simply test the funtionality of a single button or edit at a time. It’s only when you try to demonstrate the finished feature as part of a realistic scenario that you find flaws or bugs in the workflow.

Bug fixing

Both of the above exercises will likely find a number of bugs or issues that need addressing and retesting. Hopefully the whole process will proceed smoothly and you can look forward to another OMERO.figure release in the near future.

Release: 1.0.0

06 Oct 2014

I am pleased to announce release of OMERO.figure 1.0.0. This release adds support for maximum-intensity Z-projection, as well as a number of other features and minor bug fixes. A video of this release can be found here:

We have decided to remove the beta flag from OMERO.figure with this release, since it has been in use on our production OMERO server since its first release in March of this year. During that time, there have only been minor bug reports and the file format has remained very stable.

Maximum-Intensity projection:

Increment Z and T indices:

Other Features:

Bug Fixes:

Grab the release from the OMERO.figure 1.0.0 download page.

Dev: Removing my backbone.js templates from index.html

17 Aug 2014

One of the bug fixes for the last release required me to test the image viewer in isolation (see screenshot above). I needed to quickly test different image widths, heights, offsets and rotation. However, the html template for the viewer was embedded with all the other templates in script tags within the index.html page. This meant that it wasn’t available to use on a dedicated test page without copying and pasting the code elsewhere.

Googling for “backbone templates in separate files” led me to this stack overflow answer which recommended the use of “a grunt task (grunt-contrib-jst) to compile all of the HTML templates into a single templates.js file”. So that’s what I did. Now all the html templates live under static/figure/templates and are compiled into a single templates.js file by a grunt ‘jst’ task.

I also added a grunt ‘watch’ task to monitor changes to any of the template files and recompile them all if any changes are saved. So if you are editing any templates you need to have ‘$ grunt watch’ running on the command line. All that is configured in the Gruntfile.js .

Most importantly, this allowed me to create the viewer test page and to fix the bug, but it also means that the templates are easier to find and edit now, instead of being lost in one massive html file.

Release: 1.0.0-beta2

25 Jun 2014

This release of OMERO.figure includes a number of minor bug fixes and some small feature additions. The following are the most significant:

New Features:

Bug Fixes:

Grab the release from the OMERO.figure 1.0.0-beta2 download page.

Dev: Setting up nginx on Mac OSX

12 Jun 2014

On a recent trip to the University of Sussex to talk about OMERO, I presented OMERO.figure and it was well recieved. They tried to install it but they use a different web deployment there, with everything under an /omero/ prefix. E.g. server/omero/webclient/.

Unfortunately, we had neglegted to test OMERO.figure under these conditions since our test server in Dundee and my local development server are both run without any url prefix.

So, the first thing I needed to setup before fixing the bugs was to deploy my local development OMERO.figure under an /omero/ prefix. It turned out that the easiest way to do this was to use nginx, which Chris helped me to setup with the following instructions (which others may find useful). NB: The proper documentation for this is on the OMERO.web deployment docs but this is just what worked for me. Using homebrew on Mac 10.8:

$ brew install nginx
$ dist/bin/omero admin stop
$ dist/bin/omero web stop
$ ./build.py clean build
$ dist/bin/omero admin start
# you must be using fastcgi-tcp for this example
$ dist/bin/omero config set omero.web.application_server "fastcgi-tcp"
$ dist/bin/omero web start
$ dist/bin/omero web config nginx > omero_nginx.conf

Then apply the omero_nginx.conf.patch below manually. It won’t apply directly because my paths will be different than yours. You may also need to change ports based on what else you may have running.

--- omero_nginx.conf.bak	2014-05-06 10:19:48.000000000 +0100
+++ omero_nginx.conf	2014-05-06 10:20:25.000000000 +0100
@@ -33,7 +33,7 @@
             alias /Users/callan/code/ome.git/dist/lib/python/omeroweb/static;
         }
 
-        location / {
+        location ~ /omero/(.*) {
             if (-f /Users/callan/code/ome.git/dist/var/maintenance.html) {
                error_page 503 /maintenance.html;
                return 503;
@@ -41,7 +41,8 @@
 
             fastcgi_pass 0.0.0.0:4080;
 
-            fastcgi_param PATH_INFO $fastcgi_script_name;
+            fastcgi_param SCRIPT_NAME /omero;
+            fastcgi_param PATH_INFO /$1;
 
 
             fastcgi_param REQUEST_METHOD $request_method;

Copy the config to a new ‘others’ directory in your nginx location:

$ cd /usr/local/etc/nginx
$ mkdir others
$ cp path/to/bin/omero/omero_nginx.conf others/

Then edit the nginx config at /usr/local/etc/nginx/nginx.conf to remove the whole ‘server’ section:

server { }

And add the following line, right at the bottom of the http section, to include the omero_nginx.conf:

include /usr/local/etc/nginx/others/*.conf;

Then you can start nginx, working off of Django workers which use dist/lib/python/ on http://localhost:8080/omero/

$ nginx

# if you need to stop and restart
$ nginx -s stop && nginx

Following this, I was able to fix all the issues with OMERO.figure under /omero/figure and all thse fixes will be in the imminent 1.0.0-beta2 release.

UPDATE: When I first wrote this post, all that I needed to do was run nginx from the bin/omero directory itself, passing it the config file there:

nginx -c `pwd`/omero_nginx.conf

But now I’m trying it on a new machine some time later, this fails and I need to move it within the nginx directory as described above.

Sharing your Figures with others

13 May 2014

Instead of e-mailing your PI a pdf or tiff of your figure, you can share figures you’ve created in OMERO.figure by saving a file and sending them the url.

OMERO has ‘groups’ of users and the permissions of each group can be set to allow other group members to view each other’s data.

In this case, other members of your group will be able to see your figures via a url. If they have permission to view it they can simply follow the link, log-in and view the figure. Collaborators in your groups can also go to the File > Open dialog in OMERO.figure and browse available files there.

They will be able to explore and edit your figure in the same way as you can, but will not be able to save their changes. However, they will be able to save thier own copy of the figure.

Dev: Testing with jshint, jasmine and grunt

01 May 2014

I decided it was time I learnt a bit about javascript testing and look into a few of the tools I’d heard of but didn’t know anything about. E.g. node, grunt, jasmine, travis & jshint. Actually, I already knew a bit about jshint, since I currently use it to check syntax of javascript files via my editor, Sublime Text 2.

But to actually test the javascript code itself I wanted to experiment with a js testing framework and Jasmine seems to be one that gets mentioned a lot. Since the OME team are already using Travis to test Java, Python and other code committed to github, I thought I’d try to get Travis to run my javascript tests.

Node, Grunt and jshint

A quick google found this blog post which was kinda concise but seemed to cover what I wanted. I started by installing Node.js and the package manager npm using the handy ‘install’ button at nodejs.org

Now I could use the command line to install grunt, and the grunt command-line tool as described at gruntjs.com/getting-started

$ npm install grunt
$ sudo npm install -g grunt-cli     # N.B. needs sudo permissions

Continuing with the same guide, I created a package.json file for /figure/

$ cd figure/
$ npm init

Then I installed local copies of grunt and jshint, which are automatically registered in the package.json we just created.

$ npm install grunt --save-dev
$ npm install grunt-contrib-jshint --save-dev

Now I created a Gruntfile.js and used the Gruntfile.js linked from the original blog post as a template. Since I wasn’t ready to run any Jasmine tests just yet, I commented out the Jasmine parts of the Gruntfile.js and updated the paths to files that I wanted jshint to parse.

A first run of

$ grunt test

revealed that I was missing a .jshintrc file under figure/ so I also grabbed this from https://github.com/velesin/jasmine-jquery/blob/master/.jshintrc and will update if needed later.

Now I find that grunt test of jshint worked and found 3 errors

ls25107:figure wmoore$ grunt test
Running "jshint:all" (jshint) task

static/figure/js/raphael-rect.js
136 |            });
                  ^ Don't make functions within a loop.
static/figure/js/undo.js
147 |        if (_.size(redo_attrs) == 0) {
                                    ^ Use '===' to compare with '0'.
163 |                if (i == 0) {
                           ^ Use '===' to compare with '0'.

>> 3 errors in 7 files
Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

Now to set up travis, I added the simple .travis.yml file from the blog above. Then followed instructions at docs.travis-ci.com/user/getting-started/

$ gem install travis-lint
$ travis-lint
Hooray, /Users/wmoore/Desktop/figure/figure/.travis.yml seems to be solid!

I committed all the above changes to a new branch, pushed to github and opened a new PR: https://github.com/will-moore/figure/pull/4. I found that the Travis build failed due to version numbers in the package.json file. After these were fixed, the build ran jshint correctly and failed as above. With those errors fixed and pushed, the build now passes. Yey!

Jasmine

Now to get started with Jasmine testing. I began by installing the jasmine module for grunt:

$ npm install grunt-contrib-jasmine

...
Done. Phantomjs binary available at /Users/wmoore/Desktop/figure/figure/node_modules/grunt-contrib-jasmine/node_modules/grunt-lib-phantomjs/node_modules/phantomjs/lib/phantom/bin/phantomjs
grunt-contrib-jasmine@0.6.4 node_modules/grunt-contrib-jasmine
├── es5-shim@2.3.0
├── lodash@2.4.1
├── rimraf@2.1.4 (graceful-fs@1.2.3)
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
└── grunt-lib-phantomjs@0.4.0 (eventemitter2@0.4.13, semver@1.0.14, temporary@0.0.8, phantomjs@1.9.7-5)

Then I created my first jasmine spec file ‘PanelSpec.js’ under a new /spec directory. Initially I created a test that would fail so I could see this locally and on the travis build after pushing.

Now I returned to the /Gruntfile.js that we edited above and uncommented the jasmine lines, pointing the src list to various js files. On first running ‘$ grunt test’ I found that I don’t have a local copy of jQuery, since the OMERO.figure app simply loads the copy of jQuery provided by webgateway. With this added, I also found that I couldn’t simply add ‘static/figure/3rdparty/*.js’ to my src list because various libs here had dependencies on each other and had to be loaded in a particular order.

After adding jquery, underscore and backbone, in that order, I was still getting warnings on running the test locally, but the test seemed to work and get the expected error.

ls25107:figure wmoore$ grunt test
Running "jshint:all" (jshint) task
>> 7 files lint free.

Running "jasmine:src" (jasmine) task
Testing jasmine specs via PhantomJS

>> TypeError: 'null' is not an object (evaluating 'text
>>       .replace') at
>> static/figure/3rdparty/underscore.js:960 
>> static/figure/js/figure.js:1433 
...
 Panel
   X should have default zoom of 100%
     Expected 100 to be 0. (1)

1 spec in 0.004s.
>> 1 failures
Warning: Task "jasmine:src" failed. Use --force to continue.

Aborted due to warnings.

At this point I pushed to github to see if I got the same result via Travis, but had forgotton to use the ‘–save-dev’ flag when doing npm install of jasmine. After manually updating package.json I pushed again and this time got the failing test on Travis as expected.

Finally I fixed the failing test and now Travis passes. At this point the PR https://github.com/will-moore/figure/pull/4 is good to merge!

Now I just have to learn Jasmine testing, so I have started to read this book: Jasmine Javascript Testing and will hopefully have a good suite of Jasmine tests soon!

Key features of OMERO.figure

05 Apr 2014

The two main goals of OMERO.figure were to make it quick to get the layout of images right AND easy to adjust the settings of multiple panels at once.

Layout

Dragging and dropping of images is the most intuitive way of creating a particular layout. But aligning them all into a grid that is typical in most figures takes time. OMERO.figure has a “grid” button that will attempt to snap all the selected images into a grid with thin spaces between them. Also, when you copy and paste a row of images, OMERO.figure will position them directly below the original row with appropriate spacing. If you copy a column, it will be pasted as a new column to the right.

Settings

In a traditional figure creation workflow, you need to choose the settings of each panel at the time you export it from your imaging software. By ‘settings’ I mean:

However, if you wish to change these once you have started to assemble your figure in Photoshop or Illustrator, you often have to go back and re-export the image.

With OMERO.figure, the first step is to bring your chosen images from OMERO into your figure. Then you can adjust all the settings of each panel as you construct the figure. If you want to change the Z-section or timepoint of a multi-dimensional image, you simply select the panel and drag the sliders in the viewer on the right.

In many figures it’s common to compare images with different experimental treatments by applying the same settings to each one. For example, turning the same channels on / off or selecting the same time points in multiple movies.

In OMERO.figure, you can syncronise the settings across multiple images by selecting the appropriate panels, then adjusting the settings in the ‘Preview’ viewer to the right.

This is easier to demonstrate than to explain, so please checkout one of the demo movies on youtube: Introducing OMERO.figure | OMERO.figure Demo 2

Why I created OMERO.figure

26 Mar 2014

I used to be a biologist in the lab a (good) few years ago now, and I remember the time it took to create figures from my microscope images. I had to open each Deltavision image in the SoftWoRx application, copy and paste rendering settings from one image to another, then save each one as a tiff for each channel I wanted to show. I also had to write the rendering settings in my lab notebook in case I wanted to come back and export more images with the same settings later. Then I’d go to Photoshop, copy and paste each tiff into a single figure and carefully arrange them in appropriate rows and columns.

That was before we had OMERO available. One of the first useful pieces of functionality I contributed to OMERO was the “Figure scripts”, as part of the OMERO 4.2 release in the summer of 2010. These are Python scripts that constructed various standard types of figure, such as a Split-view figure or ROI figure. See a Figure scripts Demo Movie.

These scripts proved quite popular, but are very inflexible and are mostly used as a quick export for a lab meeting or print out. It was still necessary to create most figures manually, requiring individual export of all the necessary panels. So we added the ‘Batch Image Export’ script that would create a zip with all the separate planes and channels for your chosen images, along with a log of their rendering settings.

However, there was clearly a need for a tool that would give users the flexibility they required, but still provide the rapid layout of panels with coordinated rendering settings, regions of interest, labels and other common features.

I wanted to create something halfway in-between the “Figure scripts” and Adobe Illustrator.

First blog post using Jekyll

25 Mar 2014

Who knows if this blog is going to turn into anything worth reading, or even if it’s going to see the light of day? But I’ll give it a go and if nothing else, I will at least have learnt how to use Jekyll for creating blogs.