Photo Pane in Tabulator
Introduction
The Photo Pane is designed to provide a user-friendly interface in Tabulator for browsing photos in a photo album. Every photos are assumed to be described by tags. The photos shown in the pane can be filtered by highlighting one or more existing tags. The photo pane is defined in the following file:
The Photo Pane makes use of the following icons in the user interface:
- http://dig.csail.mit.edu/2005/ajar/ajaw/icons/photo_small.png
- http://dig.csail.mit.edu/2005/ajar/ajaw/icons/tag_tiny.png
- http://dig.csail.mit.edu/2005/ajar/ajaw/icons/photo_begin.png
- http://dig.csail.mit.edu/2005/ajar/ajaw/icons/photo_end.png
- http://dig.csail.mit.edu/2005/ajar/ajaw/icons/photo_back.png
- http://dig.csail.mit.edu/2005/ajar/ajaw/icons/photo_next.png
Implementation
Triggering the Pane
The pane is triggered when tabulator detects that the current object under inspection is of the type PhotoAlbum defined in the Photo Access Control Ontology. The following lines in photoPane.js handle this matter.
var RDF = RDFNamespace("http://www.w3.org/1999/02/22-rdf-syntax-ns#");
var PAC = RDFNamespace("http://people.csail.mit.edu/albert08/project/ont/pac.rdf#");
photoPane.label = function(subject) {
if (!kb.whether(subject, RDF('type'), PAC("PhotoAlbum"))) {
return null;
}
return "Photo Album";
}
Layout of the Pane
The styles of the elements of the Photo Pane are defined in the tabbedtab.css file. The following diagram shows the layout of the Photo Pane.
Figure 1. Layout of the Photo Pane.
Possible Extensions
- Allow the user to choose how many photos to display in one page.
- Create different views of the photos, such as thumbnail view, slideshow, etc.
- Allow the user to add or remove tags if the document is editable and the user is authorised to do so.
- Allow the user to remove photos from the photo album if the document is editable and the user is authorised to do so.