Overlays

The overlay feature allows one or more images to be attached to an image in the Repository. This feature has been designed for visualizing image analysis results such as segmentation results.

When multiple overlays are attached to an image, the z-position of each overlay in the stack is determined by the position of the overlay in the Overlays panel. The last entry in the panel is visually on top of the stack and subsequent entries are positioned higher in the stack. The image that overlays are attached to is positioned visually below all of the overlays.

Attaching Overlays

Overlays are by default positioned at the top left corner of the image they have been attached to, at the base resolution layer. The initial height and width of the overlay will match the overlay's base resolution layer (i.e. pixel scaling of the overlay is not considered). An overlay image can be repositioned using the Transform properties.

Sub-images may complicate overlay positioning for the following reasons: 1) if the image has multiple sub-images, the overlay’s position is determined relative to the first sub-image, at the base resolution layer; and 2) if the overlay contains multiple sub-images, only the first sub-image is viewable.

Attach an overlay using drag and drop

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Upload an image from your computer by dragging a supported image file onto the sidebar

Attach an overlay using the file selection dialog

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Click on the + button at the top of the sidebar to reveal the Add image overlay dialog
Click in the blue box to activate the file selection dialog or simply drag an image into the blue box
Click on the Start upload button
(Optional) Once the upload is complete, click on the Edit Metadata button to edit the metadata or the Edit button to change the name
Click on the X button at the top right of the popup dialog or anywhere outside of the dialog box to close it

Deleting Overlays

Overlays can be deleted from the Overlays panel.

To delete an overlay from the Overlays panel

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Identify the overlay entry to be modified
Click on the button
Click on the OK button to confirm

Overlay Properties

Overlay Name

The name is a single line text field that supports unicode characters.

To rename an overlay from the Overlays panel

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Identify the overlay entry to be modified
Click on the name of the entry
Provide a name or edit the existing text
Press the Enter key or click away from the textbox to save your changes

Overlay Visibility

Overlays are visible on the image by default once attached.

To change the visibility of individual overlays

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Identify the overlay entry to be modified
Click on the button to toggle visibility

To change the visibility of all overlays

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Click on the button at the top right corner of the Overlays panel to toggle visibility for all overlays

Overlay Transform

By default, overlays are positioned at the origin (top left corner of the image's first sub-image's base resolution layer). If an uploaded overlay is meant to span a different region of interest, an appropriate transform may be defined.

To reposition an overlay

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Click on the button next to an entry name in the panel to open the transform controls
Perform one of the following:
1. Set the X and Y values to specify the coordinates of the top left corner (with respect to the image) and set the W (width) and H (height) values to specify the extent of the overlay, or
2. Click on the button to scale the overlay so that it fits the image width

All values should be provided in pixel coordinates relative to the base resolution level of the image

Transform is available for manually created overlays but not for overlays that have been imported from image analysis systems.

Overlay Rendering

Overlays have a number of properties that define how they are rendered. These properties are shared for all team members and therefore, changes made by any user will be visible to other users.

To change the opacity of an overlay

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Adjust the opacity slider in the range of [0, 100] for an entry in the Overlays panel

To add pseudocolor to an overlay

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Click on the + Add Pseudocolor button for an entry in the Overlays panel
(Optional) Click on the color block to open the color palette and select a color from the palette

To remove pseudocolor from an overlay

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Click on the x Remove button next to the color block of an entry in the Overlays panel (only available if a pseudocolor has been previously defined)

To change the composite operation for an overlay

If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer
Hover or click on the button in the left sidebar
Select a composite mode from the dropdown for an entry in the Overlays panel. See compositing operations for more details. The default composite operation is “Normal”

Compositing Operations

Various compositing techniques are available for rendering overlaid images. These are a number of other modes that may be helpful depending on the types of images and desired effects.

Overlay composition modes

Composite mode	Description
Normal	Draw this image on top of existing content.
Source In	Draw this image only where it overlaps existing content. Non-overlapping areas are made transparent.
Source Out	Draw this image only where it doesn’t overlap existing content.
Source Atop	Draw this image only where it overlaps existing content.
Destination Over	Draw this image behind existing content.
Destination In	Draw existing content only where it overlaps this image. Non-overlapping areas are made transparent.
Destination Out	Draw existing content only where it does not overlap this image.
Destination Atop	Draw existing content only where it overlaps this image. This image is drawn behind existing content.
Lighter	Add color values of this image with the color values of the existing content.
Copy	Replace the existing content with this image.
XOR	This image and existing content are drawn only where there is no overlap.
Multiply	Multiply the color values of this image with the color values of existing content.
Screen	Color values of this image and the existing content are inverted, multiplied, then inverted again.
Overlay	A combination of multiply and screen.
Hard Light	Like overlay, but with the top and bottom layers swapped.
Soft Light	A softer version of hard light.
Darken	Retain the darkest pixel between this image and the existing content.
Color Dodge	Divide the color values of the existing content by the inverted color values of this image.
Color Burn	Divide the inverted color values of the existing content by the color values of this image, and then invert the result.
Difference	Subtract the color values of this image from the color values of the existing content and compute the absolute value.
Exclusion	Like difference, but with lower contrast.
Hue	Preserve the luma and chroma of the existing content while adopting the hue of this image.
Saturation	Preserve the luma and hue of the existing content while adopting the chroma of this image.
Color	Preserve the luma of the existing content while adopting the hue and chroma of this image.
Luminosity	Preserve the hue and chroma of the existing content while adopting the luma of this image.