MediaWiki extension: Timeline

InfoDabble > Tech Notes > MediaWiki > MediaWiki extension: Timeline
Jump to: navigation, search

By [http:www.ehartwell.com/About Eric Hartwell] - latest update September 24, 2007

Note: The WikiProject "Semantic MediaWiki" has built-in support for SIMILE Timeline, so now I'm experimenting with that instead.
Semantic MediaWiki uses structured data to search, organise, browse, evaluate, and share the wiki's content.


SIMILE[1] Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information.

Contents

[edit] Data format

[edit] Timeline data

Timeline data is stored in a simple XML file.

Event data
event Events are defined by an event element for each one:
start Start time start="Wed May 01 1963 00:00:00 GMT-0600"
end End time end="Sat Jun 01 1963 00:00:00 GMT-0600"
isDuration Duration "true"
title Text for title
(value) Wikitext for popup detail box

[edit] Band info data

The Timeline samples generate band information from data structures declared in code. MediaWiki needs to get this information from wikitext in either the extension's attributes or data. Some considerations:

  • format information (bands, width etc.) must be separated from data (events)
  • should support 1, 2, or more bands, all linked to data
  • should support hot links directly from timeline display, not just from popup info box
Band info data
width required, how much of the timeline's space this band takes up, expressed as a percent in a string, e.g., "30%".
intervalUnit required, a time unit from Timeline.DateTime, e.g., Timeline.DateTime.WEEK.
intervalPixels required, the number of pixels that the time unit above is mapped to, e.g., 100.
eventSource optional, an event source that provides events to be painted on this band, e.g., new Timeline.DefaultEventSource(). The default is null, which means the band is empty.
theme optional, a theme that provides visual setting defaults for how the band's visual elements are to be painted, e.g., Timeline.ClassicTheme.create(). The default is Timeline.getDefaultTheme().
date optional, a String or a Date (to be parsed by Timeline.DateTime.parseGregorianDateTime()) on which the band should be centered initially. The default is the current date/time when Timeline.createBandInfo() is called. The default is 0, meaning GMT.
timeZone required, a number specifying the time zone in which the band will be marked with date/time intervals. For example, to have hourly labels on the band painted by Eastern Standard Time, specify -5.
showEventText optional, a boolean specifying whether event titles are to be painted. The default is true.
trackGap optional, the number of em (dependent on the current font) to be left between adjacent tracks on which events are painted. The default value is retrieved from the provided or default theme. E.g., 0.5.
trackHeight optional, the height of each track in em (dependent on the current font). The default value is retrieved from the provided or default theme. E.g., 1.5.
zones optional, an array describing the hot zones. Each element of this array is an object with the following fields
startTime required, a String or a Date object that specifies the beginning date/time of the zone. It is parsed by Timeline.DateTime.parseGregorianDateTime() to get a Date object.
endTime required, a String or a Date object that specifies the ending date/time of the zone. It is parsed by Timeline.DateTime.parseGregorianDateTime() to get a Date object.
magnify required, a number specifying the magnification of the mapping in this zone. A greater-than-1 number causes more pixels to be mapped to the same time interval, resulting in a zoom-in effect.
unit required, one of the Gregorian calendar unit defined in Timeline.DateTime, e.g., Timeline.DateTime.MINUTE. This argument specifies the interval at which ticks and labels are painted on the band's background inside this hot-zone.
multiple optional, default to 1. A label is painted for every multiple of unit. For example, if unit is Timeline.DateTime.MINUTE and multiple is 15, then there is a label for every 15 minutes (i.e., 15, 30, 45,...).

[edit] Creating a Timeline Extension

[edit] Create the extension wrapper

The extension should probably be a parser extension rather than XML-type, but we'll keep it simple for now.

  1. Link to the API
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
  2. Create a DIV Element
    <div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>
  3. Call Timeline.create()

To make the two bands scroll in synchrony, and then to make the bottom band highlights the visible time span of the top band, add the following code (highlighted): 

var tl;
function onLoad() {
  var bandInfos = [
    Timeline.createBandInfo({
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 100
    }),
    Timeline.createBandInfo({
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200
        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;
    })
  ];
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}
 
var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}


How to create timelines, a step-by-step tutorial

[edit] Notes and References

Updates:

  • September 24, 2007: update for Semantic MediaWiki
  • July 21, 2007: initial version
  1. ↑ SIMILE (Semantic Interoperability of Metadata and Information in unLike Environments) is focused on developing robust, open source tools based on Semantic Web technologies that improve access, management and reuse among digital assets. SIMILE is a joint project conducted by the MIT Libraries and MIT CSAIL.

Catgegory:Tech Notes

Retrieved from "http://www.ehartwell.com/InfoDabble/MediaWiki_extension:_Timeline"