Using Napari to visualize and interact with images#

Matplotlib is the most flexible and traditional library to display images, also in jupyter notebooks. There are other very good options like seaborn, plotly and bokeh, with different pros and cons.

Regarding interaction, even though these libraries can be interative, Napari stands out as a fast, interactive, multi-dimensional image viewer in Python.

In this notebook, we will open a napari viewer from here, add images and perform some interactions with them.

Opening the napari Viewer#

In order to open the viewer, we first have to import napari

import napari

For this demonstration, we will also import the function nbscreenshot to display screenshots from napari here in the notebook.

from napari.utils import nbscreenshot

Now, we can open the viewer with the following command:

viewer = napari.Viewer()

INFO:xmlschema:Resource 'XMLSchema.xsd' is already loaded
WARNING: QWindowsWindow::setGeometry: Unable to set geometry 1706x1102-2766+590 (frame: 1728x1158-2777+545) on QWidgetWindow/"_QtMainWindowClassWindow" on "\\.\DISPLAY4". Resulting geometry: 1216x1170-2770+564 (frame: 1238x1226-2781+519) margins: 11, 45, 11, 11 minimum size: 608x585 MINMAXINFO maxSize=0,0 maxpos=0,0 mintrack=1238,1226 maxtrack=0,0)
WARNING:vispy:QWindowsWindow::setGeometry: Unable to set geometry 1706x1102-2766+590 (frame: 1728x1158-2777+545) on QWidgetWindow/"_QtMainWindowClassWindow" on "\\.\DISPLAY4". Resulting geometry: 1216x1170-2770+564 (frame: 1238x1226-2781+519) margins: 11, 45, 11, 11 minimum size: 608x585 MINMAXINFO maxSize=0,0 maxpos=0,0 mintrack=1238,1226 maxtrack=0,0)

Napari should open in a separated window. Some warning messages in the cell above are normal.

Let’s show a screenshot of the viewer here. We pass the variable viewer to the function.

nbscreenshot(viewer)

Opening images in napari from a notebook#

Now, let’s load some example images here and visualize them in napari.

import numpy as np
from skimage import data

We will open a 2D grayscale example image from scikit-image called human_mitosis.

image_human_mitosis = data.human_mitosis() # read the example image 'human_mitosis' from scikit-image
image_human_mitosis.shape

(512, 512)

To open an image in napari from a notebook, we use the command add_image() from the viewer.

viewer.add_image(image_human_mitosis)

<Image layer 'image_human_mitosis' at 0x1f465677af0>

This adds the image as a layer in napari. The layers list can be seen at the bottom left of the screen. For now, we have a single image layer there. Let’s take a new screenshot.

nbscreenshot(viewer)

Interacting with the image#

In the viewer, we can interact with the image in several ways. We can zoom in/out with the mouse wheel for example.

Also, we can change something in the viewer, like the colormap, and retrieve this change back in code. Before we do that, let’s get the current colormap of this layer.

We have to follow a hierarchy to get to the image colormap:

1. `viewer`

2. `layers`

3. `colormap`

4. `name`

So the command becomes:

current_colormap = viewer.layers[0].colormap.name
current_colormap

'gray'

The [0] index means we are accesssing a property of the first layer.

Now we go to the napari viewer and select a different colormap.

nbscreenshot(viewer)

current_colormap = viewer.layers[0].colormap.name
current_colormap

'magma'

Exercise 1#

Change the contrast of the human_mitosis image in napari and print the contrast limits in this notebook.

Then, use numpy’s min method and numpy’s percentile method to specify the contrast limits as being the image minimum and 99% of the maximum value. Assign these values to the image shown in napari.

Hint: you can access and modify the contrast limits in a similar fashion to the colormap:

1. viewer

2. layers

3. contrast_limits

Exercise 2#

Add the brick image below to the viewer and now do the other way around: by code, change the colormap to red and the opacity to 0.5. Check the effects in the viewer.

Hint: you can access and modify the opacity in a similar fashion to the colormap:

1. viewer

2. layers

3. opacity

image_brick = data.brick()