Last modified: February 08 2015 16:45:05.

Image Annotation Tool


Courseware Image Annotation Tool Interface

The Image Annotation Tool allows administrators of the course to add a high definition image (deeply zoomable to details) so that instructors and enrolled learners can engage in close image viewing and add media-rich annotations or commentaries and tags to selected detail sections of the image.


Adding the Image Tool to the Courseware

To add the tool click on the “Advanced Module” button (see figure below) and then click on the “Image Annotation” list item.

If you don't see the Image Annotation tool listed you will need to install it under the Manual Policy Definition Advanced Module List for your course settings. for more info on how to do this please visit the the Setup page

Image annotation install module item

After clicking the “Image Annotation” list item, you will be presented with a blank sample module component ready to be edited and populated with your image.

Image Annotation Studio Module

To change the image click on the “Edit” button and the Editor window will pop-up on top of the module page (see fig. #). Here you have two window options: the Editor window to change the image to be annotated or the Settings window to change the tool settings. You can toggle between “Editor” and “Settings” by clicking on the corresponding buttons on the top right of the window. See a description bellow for each window option.


Editing the Image Annotation Module: Editor View

To change the image or edit the instructions on the “edit” button. Then click on the “Editor” button if it’s not already selected and the editor window will pop-up on top of the module

Image Annotation Editor

To add a set of instructions to your module enclose the assignment directions between the <instructions> </instructions> opening and closing tags.. Here you need to use HTML tags for your text. Note it may be easier to copy and paste HTML code generated from a WYSIWYG editor of your preference (for example Adobe Dreamweaver).

To add a new image you will need to enter the specifications in json (Javascript Object Notation) format between the <json> opening and </json> closing tags. Please note that the json code for the image annotation tool relies on the OpenSeaDragon deep zoom image viewer data format (see: http://openseadragon.github.io/ ) and it requires the jason data structured as specified by the International Image Interoperability Framework API (IIIF) tile image format (see IIIF API specification http://www-sul.stanford.edu/iiif/image-api/1.1/).

If you are not familiar with the IIIF image format or the parameters that need to be specified please contact your your technical support team to obtain the correct parameter information to be entered between the <json> tags. The settings follow the same specifications as defined in the OpenSeaDragon IIIF Tile Format specification: http://openseadragon.github.io/examples/tilesource-iiif/ http://openseadragon.github.io/examples/tilesource-iiif/

See bellow for an example of the possible json parameters:

navigatorSizeRatio: 0.25,
wrapHorizontal: false,
showNavigator: true,
navigatorPosition: "BOTTOM_LEFT",
showNavigationControl: true,
tileSources: [ {
"profile": "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level2",
"scale_factors": [1, 2, 4, 8, 16, 32, 64],
"tile_height": 1024,
"height": 3466,
"width": 113793,
"tile_width": 1024,
"qualities": ["native", "bitonal", "grey", "color"],
"formats": ["jpg", "png", "gif"],
"@context": "http://library.stanford.edu/iiif/image-api/1.1/context.json",
"@id": "http://your_image.jp2"
}]


Editing The Image Annotation Module: Settings View

To change the settings for the image annotation module click on the “Settings” button (see fig. 8). The settings are listed in the alphabetical order of the titles.

Image Annotation Settings (part 1)

Default Annotations Tab: Here you can define what annotations will be preloaded when students first visit the page. You can chose from one of three possible options: myNotes, Instructor, or Public (only enter one). See below a description for each option:

Display Name: To add a title for the module enter the name in text field.

Email for ‘instructor’ Annotations: Instructors have the option to display pre-populated annotations within the text. You can enter the email of one registered user in the course (preferably one of the administrators of the site) to use as the “instructor” annotations. The annotations entered by the “instructor” will be displayed when the “instructor” tab is selected in the student view.

Mode for Annotation Tool: Here you can define annotation read and writing privileges for the entire course. There are three possible modalities using two predefined terms: “instructor” and “everyone”.

Tags for Assignments: You can add a set of predefined tags (or thematic terms or categories) that you can instruct students to use in a specific assignment. Tags have to be associated with a custom text highlight color. Each tag needs to be paired with the corresponding highlight color separated by a colon and multiple tags need to be separated by a coma (for example: tag1:color1,tag2:color2,tag3:color3). The color can be any hexadecimal HTML color number beginning with the hashtag (#) (see http://en.wikipedia.org/wiki/Web_colors). When choosing a color be sure to test that there is enough contrast to between it and the text.


Using the Image Annotation Tool