Annotation Display

Kaukolu allows the user to create arbitrary annotations reaching from the whole page down to a single character only. This is quite managable if only one person is working with the wiki at the same time, but the effort needed to keep track of existing annotations and separate out the contained information increases dramatically as soon as the same page is annotated by several users at different times.

The closely related Mymory Project makes use of an Eyetracker device that observes the user and keeps track of the user's reading activities within a specific page. The observation results are stored as a number of annotations on the processed page as "Read" or "Skimmed" classes for example. It is obvious that this can lead to a large number of additional information that has to be presented to the user when he views the page, but makes it even harder for him to access the information he needs.

In order to optimally exploit the existing information, Kaukolu offers filters, different presentation modes and special handling for above mentioned Eyetracker annotations. This will be demonstrated using the License Ontology available at, but is applicable to other application areas as well.

Usage Information

The interface elements which are described in the following are located at the top of the page. Changes in selected options are reflected immediately.

Presentation Modes

The presentation mode is switched by the check box labeled "Icon Mode". If switched off, all annotated text on the current page will be highlighted, else highlighting is applied to individual paragraphs only and is deferred until the mouse cursor approaches it. Furthermore, an icon will be added to the right-hand side of the corresponding paragraph.

Annotation - Highlighted

Annotation - Iconized

As soon as the mouse hovers over an icon or some text that has got an annotation assigned to it, the entire scope of all annotations at the current position will be rendered in a different color. Additionally, a popup will be opened displaying essential information like author, date of creation and other properties including a preview of the drawing if applicable. The previous presentation will be restored when the mouse cursor leaves the current paragraph on either side.

Annotation Popup

Kaukolu allows to assign custom icons to each annotation class that will represent all annotations of that class occurring within a paragraph. This means the same icon is shown at most once per paragraph, thus the resulting popup accumulates all annotations it represents.


The basic filter allows to switch between annotations of different authors. Changes do not result in reloading the current page, but only annotations eligible for all currently selected filter values will be rendered and accessible.

Annotation Filters

Eyetracker Annotations

As mentioned above, Eyetracker annotations are related to a different but closely related project. Nevertheless, the corresponding annotations can be created manually after loading the AttentionAnnotation ontologie used in the project. This was done in order to create the screenshot shown below.

The presentation of Eyetracker annotations can be changed using the corresponding combo box. If it is set to "Ignore", they do not show up at all, if set so "Show as annotation" the above passage about presentation modes applies. Choosing "Show only read (/ skimmed)" hides all paragraphs that do not have at least one read (or skimmed) annotation while the headlines are still visible. This allows the user to focus on the more important part of the text while their relations with the overall context is apparent. The option "Show unread as gray" grays out passages according to their importance. Areas annotated as "Read" remain unchanged, while "Skimmed" ones convert to to a dark gray and unread ones are rendered in a light gray.

Eyetracker Annotations

Option persistence

A browser cookie keeps track of the selected filter options, eyetracker presentation and icon mode in order to avoid constant resetting of the desired settingswhen another page is navigated to. The stored values will be applied as soon as the page was fully loaded, recreating the previously selected state. Although some options may not be applicable, e.g. if there is no annotation created by the chosen author, it is added to the selection to keep track of active values. Selecting "All" deactivates a filter.

Technical Aspects

The basic structure and flow of events is similar to the Annotation creation. AJAX calls are used to communicated with a servlet delivering qualifying annotations from the back end. These are then processed by JavaScript code that takes care of building up filters, supplementary structures and information as well as rendering, popup behavior and option persistence.

A JSP determines the filter layout, sets global variables taken form the JAVA side and contains the icon definition. It also includes the application specific JavaScript file yielding high adaptability.

Typical Use Case

Upon page loading the application specific function initAnnotationDisplay() and the general initAnnotationDisplayGeneric() create the specified filters, populate them via AJAX request, setup the environment and retrieve annotations depending on the filter values stored in the cookie. The also application dependent retrieveAnnotations() creates the query string that is transmitted as an AJAX request to the servlet by retrieveAnnotationsGeneric(). Upon the receive event the previously existing state is deleted in unprocessAnnotations() and recreated during processAnnotations(). Global structures are initialized before each received annotation is processed individually in extractAnnotationInformation() which is the core of the algorithm. All fragments belonging to an annotation were derived in a preprocessing step and are now assigned to the annotation objects. The sorted fragments are then used to augment the paragraphs, i.e. generate an icon, set the read status and make them react on mouse over / out events. All information ever needed for future events have been gathered and are directly available through annotationsByUri, annotationsByParagraph, orderedAnnotationUris in the first place and via annotation.fragments, annotation.paragraphs, the paragraphs themselves in the second place.

The above applies to the actions performed when a filter value is changed, too.

Annotation processing is followed by formatAnnotations(), which is also executed when any of the presentation options are changed. The first step is to determine if an annotation should be highlighted, depending on icon mode and if the annotation is active. Potentially inactive annotations, specifically Eyetracker annotations, are processed first in order to avoid dehighlighting of active ones. The second step determines if the icon should be displayed next to the paragraph, depending on the above conditions as well.

formatEyetrackerAnnotations() is performed in a separate and supposed-to-be independent step. The appearance of paragraphs is manipulated depending on their read status and the selected option for displaying Eyetracker annotations.

The function mouseOver() is executed when the mouse hovers over an annotation fragment or icon, but will terminate immediately if the annotation is not active. After extracting the anchor uri, openPopup() determines the annotations that are to be displayed, highlights the corresponding text, and opens a popup containing their summary. The text passages are rest when the popup is closed.


Last modified 9 years ago Last modified on 02/13/08 14:26:38

Attachments (5)

Download all attachments as: .zip