Image Comparison (activity type)
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[1] library to compare two images.
References
| Documentation | |
|---|---|
| Installation | Look and Feel |
| Interaction Modes | Developing Activity Types |
| Creating an Interactive | Framework |
| Integrating CLIO | Contribute |
