Applications, Demonstrators, Updates, Videos

Prototype #2

This second version of the our Simile Exhibit animation facet has undergone a major overhaul under-the-hood, resulting in two major enhancements. First, the facet can now filter either as a list or a range, and second, the user interface is now decoupled from the rest of the code to form its own plug-in-able module.

Permitting different filtering modes opens the facet up to a broader range of functionality; each mode is designed to address a different type of relationship between the animation and the linked data it influences.

The list mode works like the familiar list facet, except the animation switches on or off the various options automatically, as time passes; in HTML fragment #1 below we see a facet connected to the group property, with Romanticism selected at 0:00—0:07, both Romanticism and Empiricism set at 0:02—0:10 (yes, the facet can handle overlapping periods, so Romanticism will actually be selected at 0:00—0:10), etc.

<div ex:role="facet" ex:facetClass="AnimationFacet"
  ex:type="youtube" ex:ytwidth="224" ex:ytheight="140" ex:video="ILGK83V6h9s"
  ex:facetLabel="Group Filtered on Time"
  ex:expression=".group"
  ex:selections="[
    { from: 0, to: 7, select:['Romanticism'] } ,
    { from: 2, to:10, select:['Romanticism','Empiricism'] } ,
    { from: 5, to:15, select:['Empiricism'] } ,
    { from:25, to:30, select:['Idealism'] }
  ]">
</div>

The range mode works on a numeric range, mapped uniformly across the duration of the animation, as demonstrated by HTML fragment #2 below. Here the facet is attached to birth_date, and groups its items with a precision of 100. The facet automatically locates the lowest and highest value for that property (its maximum range), rounding up or down according to the precision. In the Education Philosophers example the maximum range is -600 to 2000 (or 6th century BC to 20th century AD), so 0:00 will represent 600BC and the end of the animation will represent 2000AD. As the animation plays the items are filtered century by century, in accordance with the precision setting of 100. To filter the items decade by decade, the precision should be changed to 10 (resulting in an animation spanning -560 to 1950).

<div ex:role="facet" ex:facetClass="AnimationFacet" 
  ex:type="youtube" ex:video="ILGK83V6h9s"
  ex:facetLabel="Group Filtered on Time"
  ex:expression=".birth_date"
  ex:precision="100">
</div>

The second major change to the animation facet is the divorcing of semantic filtering from the user interface inside the code. This makes it possible to drive the animation facet using any type of web embeddable linear media (video, audio, or even a Slideshare slideshow) by coding a replacement UI module to bind the media’s API (programming libraries) to the facet.

In both the fragments above the type was set to YouTube, meaning the YouTube module will be used to drive the animation. Note: we do not need to set the duration of the animation, as this will be sourced automatically from the YouTube video itself.

By contrast, below is a fragment of HTML showing how to set up the facet using the default user interface (the slider): note how in the absence of a video, we’re required to explicitly set an animation duration.

<div ex:role="facet" ex:facetClass="AnimationFacet" 
  ex:facetLabel="Group Filtered on Time"
  ex:expression=".birth_date"
  ex:duration="60"
  ex:precision="100">
</div>

As this JISC project focuses only on video as a controller for semantically linked data, we’ve coded only two user interface modules for the facet: the default slider, and a YouTube module. Their source code is well documented, however, demonstrating to other programmers how to create alternative UI modules.

About these ads

Discussion

Comments are closed.

Previous Posts

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: