Image Comparison (activity type)

This section contains CLIO documentation.

Overview

This activity can be used to compare, contrast or overlay one image over another, allowing a user to interactively decide how much of each image they would like to see. You can also add ‘Look Closer’ buttons to highlight specific areas of the image. If you only need basic image annotation to highlight a specimen or a point on a map, and not a full comparison, the Annotated Image activity type may be more applicable.

Features

Image Comparison

Visitors can drag a slider to interactively view different amounts of each image.

Labels

There are label buttons in the bottom corners that can be opened to display a rich text description about each image.

Look Closer Display Modes

Toggleable

The Look Closer buttons can be toggleable, allowing the visitor to show and hide the buttons to lessen visual clutter. ^{[illustration needed]}

Invisible

The Look Closer buttons can be made invisible, allowing the buttons to be integrated into the image. ^{[illustration needed]}

Static

The Look Closer buttons can be set to static, which will force all Look Closer buttons to appear as a magnifying glass icon of the same size, regardless of individual button configuration. ^{[illustration needed]}

Look Closer Buttons

Position

The position is set relative to the (x,y) coordinate of (0,0). The Look Closer buttons position is set from the top left corner.

Size

The size of the button can be set as a radius in pixels.

Icon

The icon of a button can be configured to create visual groups.

Title

The title of a button is visible when the visitor hovers over it, and when certain Look Closer Views are open.

Content

Each button can display either rich text, a gallery of images, or a video.

Examples

Who's Eating Who?

This activity shows different animals that can be found in Hanford Reach. The visitor is invited to drag the divider to view a rudimentary food web connecting all the animals. Each animal can also be clicked on, opening a Look Closer view with more information.

Parts of a Sketch

This activity illustrates the different qualities of a good scientific sketch and one that needs improvement.

X-Ray Vision

This activity overlays the skeletal anatomy of a house cat.

Spot The Difference

This activity imposes a Chinook salmon over a Sockeye salmon for the visitor to spot the diferences.

About

This activity type uses the TwentyTwenty library to compare two images.

References

Documentation
Installation	Look and Feel
Interaction Modes	Developing Activity Types
Creating an Interactive	Framework
Integrating CLIO	Contribute